[分享]css3怎么设置图片形状

CSS3可以很方便地实现不同的图片形状，例如圆形、椭圆形或任意自定义形状。要设置图片形状，可以使用以下几种方式：img { borderradius: 50; / 圆形 / } img { borde...

CSS3可以很方便地实现不同的图片形状，例如圆形、椭圆形或任意自定义形状。要设置图片形状，可以使用以下几种方式：

img {
  border-radius: 50%; /* 圆形 */
}

img {
  border-radius: 50% / 75%; /* 椭圆形 */
}

img {
  clip-path: circle(50%); /* 圆形 */
}

img {
  clip-path: ellipse(50% 75%); /* 椭圆形 */
}

img {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 自定义形状 */
} 

以上代码中，border-radius属性可以用来设置圆形或椭圆形图片。其中，border-radius值设置为50%表示圆形，设置为50% / 75%表示椭圆形。clip-path属性可以用来设置自定义形状，其中circle函数可以实现圆形形状，ellipse函数可以实现椭圆形状，polygon函数可以实现任意自定义形状。clip-path属性的参数可以使用百分比、长度值或关键字来表示。

通过CSS3设置图片形状，可以使网站更加美观和具有吸引力。同时，这些技巧也可以用于其他元素的形状设置。