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

8年前 (2018-08-15)CSS8.8k

复制本页网址打印

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS3实现图片照片边缘模糊效果-益吾库</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="img-edge-cover">  
  <img src="https://s0.2mdn.net/5585042/10_300x250_PS_CN_2017_2.jpg" alt="photo">
</div>
</body>
</html>

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

打赏

重要声明
当前栏目内容除非特别标注，否则均来源于网络公开信息整理分享，本站不提供存储和下载服务，且无法保证第三方链接永久可靠。您若对本站或当前页面内容有疑问或者建议，欢迎联系我们反馈，我们将尽快与您互动，谢谢支持！