[分享]css中怎么做正方形

在CSS中，要制作一个正方形，需要设置元素的宽度和高度相等，并且使用盒模型的border来实现。

.square{
   width: 100px;
   height: 100px;
   border: 1px solid black;
} 

以上代码中，我们设置一个.square的类，宽度和高度都为100px，并且边框为1px的黑色边框。这样就得到了一个100x100的正方形。

如果你想让正方形颜色填充，而不是边框填充，可以使用CSS3中的box-shadow属性。

.square{
   width: 100px;
   height: 100px;
   box-shadow: 0 0 0 1px black;
} 

以上代码中，我们使用了box-shadow属性，前两个值表示x轴和y轴偏移量，第三个值表示模糊度，第四个值表示扩展半径，最后一个值表示阴影颜色。实现了一样的效果。

而如果我们要制作一个圆形，可以使用border-radius属性。

.circle{
   width: 100px;
   height: 100px;
   border-radius: 50%;
} 

以上代码中，我们设置一个.circle的类，使用border-radius属性，把元素的边框半径设置为50%，就得到了一个圆形。

相信现在你已经掌握了如何用CSS实现正方形和圆形了。另外，你还可以通过JS来动态地修改元素的宽度和高度，使其根据不同屏幕尺寸呈现出不同的效果。