[分享]css3图片做圆不要颜色

CSS3在设计网页时提供了许多有趣的功能，其中之一就是可以将图片做成圆形。这对于平时设计中需要使用圆形图片的情况来说非常有用。img { borderradius: 50; } 上面的代码就能实现将图...

CSS3在设计网页时提供了许多有趣的功能，其中之一就是可以将图片做成圆形。这对于平时设计中需要使用圆形图片的情况来说非常有用。

img {
  border-radius: 50%;
} 

上面的代码就能实现将图片变成圆形，只需要给图片添加一个border-radius属性，并设置其值为50%即可。但是如果图片本身具有颜色，那么这时候就会发现图片边缘的颜色会跟背景色混合，影响效果。为了解决这个问题，我们可以通过加入一个遮罩层的方式来实现圆形图片。

.mask {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff; 
  overflow: hidden;
}

.mask img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
} 

上面的代码实现了一个遮罩层，遮住圆形图片边缘的颜色。我们首先重新设置图片的大小，确保它填满遮罩层；然后给遮罩层的背景色设置白色，这时候边缘的颜色就不会跟背景色混合了；最后将遮罩层的边缘设置为圆形，并添加一个overflow:hidden的属性值来隐藏图片边缘。

这样，我们就可以轻松地实现一个不带颜色的圆形图片了。