css将图片弄成圆形

在网页设计中，将图片裁剪成圆形是一个很常见的需求，下面我们来介绍一下如何使用 CSS 实现将图片变成圆形。

img {
    border-radius: 50%;
}

上面的代码很简单，只需在图片的样式中添加一个 border-radius 属性，将值设置为 50%，就可以将图片的边角裁剪成一个圆形。

如果要将图片设置为其他圆角度数，只需将 border-radius 的值设置为不同的数值即可。

img {
    border-radius: 10px;
}

如果需要对不同位置的圆角进行设置，可以使用 border-top-left-radius、border-top-right-radius、border-bottom-left-radius 和 border-bottom-right-radius 等属性。

img {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
    

上述代码将图片设置成了左上角和右上角为大圆角，左下角和右下角为小圆角的样式。

通过以上的方法，我们可以很方便地将图片裁剪成各种不同的圆形，从而为网站的设计增加不少美感。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！