/* 将图片设置为圆形 */ img { border-radius: 50%; }
上述代码中,大家使用了border-radius属性,这个属性可以将元素的边框设置为圆角,通过将圆角值设置为50%(或者与图片宽高相等的值),便可实现图片圆形的效果。
当然,如果大家需要设置多个元素为圆形,可以使用class或者id来进行区分。
/* 将指定class为circle的元素设置为圆形 */ .circle { border-radius: 50%; }
除了使用border-radius属性,还可以使用clip-path属性来实现图片圆形的效果,具体实现方式可以参考下方代码。
/* 将图片设置为圆形 */ img { clip-path: circle(50%); }
总而言之,使用CSS让图片圆形显示非常简单,只需要一行代码即可完成。