css3做圆形图片

CSS3做圆形图片是一种非常常见的效果，可以用于图片展示、头像等多种场景。接下来，我们就来一起学习一下如何使用CSS3实现圆形图片。

img {
   border-radius: 50%;
}

以上代码是最基本的CSS3圆形图片实现方式，它通过设置图片的边框圆角半径来将图片裁剪为圆形，其中50%的值对应着圆形图片的半径。

如果你想要进一步控制圆形图片的大小，可以设置图片的宽高，并将宽高值设为相同的数值。例如：

img {
   width: 100px;
   height: 100px;
   border-radius: 50%;
}

以上代码将图片的宽高都设置为100px，同时设置边框圆角半径为50%，实现了一个大小为100px的圆形图片。

如果你想要让圆形图片添加一点特效，可以通过CSS3的transform属性来实现。例如，我们可以让圆形图片在鼠标悬停时做一个旋转动画：

img:hover {
   transform: rotate(360deg);
   transition: transform 0.5s ease-out;
}

以上代码使用了鼠标悬停时的伪类:hover，当鼠标悬停在图片上时，会触发transform属性，将图片旋转360度。同时，过渡效果的transition属性添加了一个缓和函数和一个持续时间，让图片旋转的过程更加流畅。

通过以上三种方法，我们可以轻松实现一个简单的CSS3圆形图片效果。当然，如果你想要实现更加复杂的效果，也可以研究一下别的CSS3属性，如Box-shadow、linear-gradient等等。