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怎么设置
box-shadow:0 0 50px 30px #fff inset;
}
.img-edge-cover img{
width: 180px;
height: 180px;
display: block;
margin-bottom: 20px;
}
需要注意的是，直接为图⽚所在外层DIV添加边缘阴影是看不到效果的，因为阴影会被图⽚遮住，所以这则实例是通过⼀个绝对定位的伪元素添加阴影。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。