html图片边缘阴影效果,CSS3实现图片照片边缘模糊效果

某些时候你可能需要让图片四周带有边缘模糊效果，那么除了PS之外有没有简单的代码实现方法呢？今天我们就使用CSS3的新特性实现图片边缘的模糊效果，首先你需要在图片标签外部套一层DIV标签，其次再为外层DIV(基于伪元素)添加一圈向内的边缘阴影 ，也是css3的新属性 box-shadow ，这样就达到了模拟图片边缘模糊效果的目的。以下是实例代码：HTML>

CSS3实现图片照片边缘模糊效果-益吾库

.img-edge-cover {

width: 180px;

height: 180px;

position: relative;

}

.img-edge-cover:after {

position: absolute;

content: '';

width: 100%;

height: 100%;

bottom: 0;

left: 0;

box-shadow:0 0 50px 30px #fff inset;

}

.img-edge-cover img{

width: 180px;

height: 180px;

display: block;

margin-bottom: 20px;

}

  

需要注意的是，直接为图片所在外层DIV添加边缘阴影是看不到效果的，因为阴影会被图片遮住，所以这则实例是通过一个绝对定位的伪元素添加阴影。