css将图片边框圆角

CSS中有很多属性可以让我们调整图片的样式，例如图片的边框。而将图片的边框变为圆角是一种非常常见的效果，那么，该怎样在CSS中实现图片边框圆角呢？

下面就来介绍CSS中的border-radius属性及其用法。

img {
    border-radius: 50%;
}

上面的代码就是将图片的边框圆角化的例子，其中50%的值是用来设置圆角半径的，值越大，圆角就越明显。

除了设置具体数值，我们还可以将其设置为"inherit"、"initial"、"unset"等属性值。其中，inherit表示继承父元素的属性值，initial代表使用浏览器默认值，unset将元素的属性重置为其父元素的属性。

需要注意的是，border-radius属性可以用于任何有边框的元素，如div、input等，也可以单独设置某个角的半径。

div {
    border-radius: 10px 5px 8px 3px;
}

上面的代码就是将div的四个角的圆角半径排列为左上、右上、右下、左下的顺序，并设置其值。设置单个角的方法则是用四个值中的一至多个值覆盖原有值。例如：

div {
    border-radius: 10px 0 0 10px;
}
    

上面的代码就是设置div的左上和左下两个角的圆角半径为10px，而其他两个角保持为默认值。

总之，CSS中的border-radius属性不仅可以使图片边框圆角化，还有很多其他用途，希望大家可以好好利用这个属性。

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