在CSS中,要制作一个正方形,需要设置元素的宽度和高度相等,并且使用盒模型的border来实现。.square{ width: 100px; height: 100px; border: 1px so
在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来动态地修改元素的宽度和高度,使其根据不同屏幕尺寸呈现出不同的效果。
粉丝
0
关注
0
收藏
0