[分享]css3图片毛玻璃白边

CSS3技术已经逐渐成为前端设计的标配，而图片毛玻璃效果是其中一种精美而又有趣的效果，使得图片显得更加有层次感。要实现图片毛玻璃效果，需要使用CSS3中的filter属性，而具体的效果可以通过blur...

CSS3技术已经逐渐成为前端设计的标配，而图片毛玻璃效果是其中一种精美而又有趣的效果，使得图片显得更加有层次感。

要实现图片毛玻璃效果，需要使用CSS3中的filter属性，而具体的效果可以通过blur来控制。

img{
  filter: blur(7px);
} 

上面的代码将会对图片进行7像素的模糊处理，如果想让图片周围有白边，则可以在图片外层使用伪元素来实现。

<div class="wrapper">
  <img src="your-image-url">
</div>

.wrapper{
  position: relative;
  display: inline-block;
}

.wrapper::before{
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  z-index: -1;
  background-color: #fff;
  opacity: 0.4;
  filter: blur(5px);
} 

上述代码中，我们首先为图片外层的wrapper设置了相对定位与inline-block的属性，接下来，在伪元素before中设置了取代wrapper位置的白色背景及透明度，通过blur来实现图片周围的模糊效果。要注意的是，before的z-index要设置为负值，否则会遮盖住图片。

通过这种方式，我们就可以很容易地实现图片毛玻璃及白边的效果了。这种效果可以适用于很多设计中，比如banner、卡片等，让设计更加别致。