1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html图片边缘阴影效果 CSS3实现图片照片边缘模糊效果

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

时间:2021-10-24 19:34:01

相关推荐

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:0050px30px#fffinset;

}

.img-edge-coverimg{

width:180px;

height:180px;

display:block;

margin-bottom:20px;

}

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。