[分享]css3怎么让设置图片半径

CSS3的borderradius属性可以让我们轻松设置各种形状和大小的圆角。如果我们要设置图片的圆角，也可以使用这个属性。img { borderradius: 50; } 这个样式将会把图片变成一...

CSS3的border-radius属性可以让我们轻松设置各种形状和大小的圆角。如果我们要设置图片的圆角，也可以使用这个属性。

img {
  border-radius: 50%;
} 

这个样式将会把图片变成一个圆形。如果我们只想让图片有一半是圆形，可以将border-radius的值设置为50%。

img {
  border-radius: 50% 0 0 50%;
} 

这个样式将会把图片的左半边变成一个圆角矩形。

img {
  border-radius: 10px 30px 50px 70px;
} 

这个样式将会让图片的四个角都成为不同大小的圆角。

除了border-radius，还可以使用clip-path属性来设置图片的形状。clip-path接受一个SVG路径作为参数，可以用来绘制复杂的形状。

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
} 

这个样式将会把图片变成一个四边形，每个角都是直角。

使用这些样式可以让图片的形状更加有趣，在网站设计中得到更好的效果。