css3 图片边缘模糊

CSS3是一个强大的前端技术，可以实现一些惊人的效果。其中之一就是边缘模糊，可以让你的图片看起来更加自然而真实。

边缘模糊是通过使用CSS3的属性Box-shadow和filter来实现的。

.img-blur {
  Box-shadow: 0 0 20px 5px rgba(0,.5);/*在Box-shadow中设置模糊半径和透明度*/
  filter: blur(5px);/*使用filter中的模糊效果*/
}

在上面的代码中，Box-shadow属性设置了模糊半径和透明度。模糊半径越大，模糊效果就越明显；透明度越低，图片在边缘处的模糊效果就越淡。同时，也可以使用水平方向偏移量和垂直方向偏移量来控制阴影的位置。

filter属性中的blur函数可以让图片产生模糊效果。在这个例子中，我们将其值设置为5px。同样，值越大，图片的模糊效果就越明显。

最后，我们需要将这个样式应用到我们的图片中：

<img src="example.jpg" class="img-blur" alt="example image">

在img标签中添加class为img-blur，即可为图片设置边缘模糊效果。

如果想让图片仅在鼠标悬停时显示边缘模糊效果，可以使用:hover伪类：

.img-blur:hover {
  Box-shadow: 0 0 20px 5px rgba(0,.5);
  filter: blur(5px);
}

通过使用Box-shadow和filter属性，我们可以很容易地实现图片的边缘模糊效果。利用这个技术，你可以为你的网站增添更多生动的细节，创造出更加真实的用户体验。