css圆定义圆形图片圆形 |css3 img 透明

img{
border-radius: 50%;
}

上面的CSS代码就是定义了一个图片的圆角半径为50%，这样就能够将其变成圆形的。需要注意的是，大家需要将这个CSS样式设置到图片上，而不是单独设置div容器之类的东西，才能保证图片的圆形效果。

在实际应用中，如果大家要将一组图片都变成圆形，大家可以将代码书写为下面这样：

.img-wrap{
display: inline-block;
width:100px;
height:100px;
border-radius: 50%;
overflow:hidden;
}
.img-wrap img{
max-width: 100%;
}

上面的CSS代码中，使用了容器来包含图片，这样可以解决图片变形的问题。大家将容器的宽高设置为100px，并且设置overflow:hidden属性，这样其内部添加的图片就可以被强制拉伸为圆形。同时，大家对图片进行了max-width属性的设置，这样可以防止图片因为尺寸太大而逃出圆形的容器。

使用上述方法，大家可以轻松地实现网页中的圆形图片，使页面更加美观。