问题

有些图片边缘和网页背景颜色对比较明显，但是我们想将其边缘模糊化，实现下图效果，怎么做？

修改前	修改后

解决思路

1.在图片外层套一个div容器。
2.然后为外层div添加一圈向内的边缘阴影，模拟图片边缘模糊效果。

代码实现

.html文件

<div class="cover">
    <img src="{{ url_for('static', filename='images/physics.gif')}}" alt="physics" class="physics">
</div>

.css文件

.physics {
    display: block;
    margin: 0 auto;
    height: 100px;
}
.cover {
    margin: 0 auto;
    width: 133px;
    height: 100px;
    position: relative;
}
.cover:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    box-shadow:0 0 50px 30px #ffffff inset;
}

参考链接