淘先锋技术网

首页 1 2 3 4 5 6 7

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将图片处理成圆形非常简单,只需要少量的代码即可实现,适用于各种网页设计。