css3鼠标经过圆形图片 |css实现单选框样式

/* 创建圆形图片 */
.img-circle {
border-radius: 50%; /* 将图片设置成圆形 */
width: 200px; /* 图片的宽度 */
height: 200px; /* 图片的高度 */
}
/* 添加鼠标经过效果 */
.img-circle:hover {
transform: scale(1.1); /* 图片放大 10% */
}

首先，大家要将图片设置成圆形。这里大家使用border-radius属性将图片的边角设置成50%即可。注意，图片的宽度和高度需要相等，否则会变成椭圆形。

接下来，大家添加鼠标经过效果。这里大家使用transform属性来控制图片的大小。当鼠标经过时，将图片的大小放大10%即可。

如此一来，当鼠标经过图片时，它就会变成一个漂亮的圆形了。此外，大家还可以通过其他CSS属性来自定义这个效果，比如添加渐变或阴影效果，让大家的图片更为生动有趣。