CSS可以很容易地将图片处理成圆形,只需要简单的几行代码即可完成。
img{ border-radius: 50%; }
上述代码中,border-radius属性用来设置图片的圆角半径,50%的值表示将图片处理成圆形。
除此之外,还可以使用伪元素before或after来实现图片圆形化。
.round{ position: relative; overflow: hidden; } .round:before{ content: ''; display: block; padding-top: 100%; } .round img{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%; border-radius: 50%; }
上述代码中,.round类用来给父元素设置样式,它的overflow属性为hidden,用来将图片的溢出部分隐藏,实现圆形效果。同时,为了实现图片的自适应大小,使用了padding-top属性,给伪元素:before设置一个宽高比例为1:1的padding值,使其成为一个正方形占据父元素的位置。接着,使用绝对定位将图片定位到伪元素的中心位置,并将max-width和max-height属性设置为100%实现图片的自适应大小,最后使用border-radius属性将图片处理成圆形。
使用CSS将图片处理成圆形非常简单,只需要少量的代码即可实现,适用于各种网页设计。