问题
有些图片边缘和网页背景颜色对比较明显，但是我们想将其边缘模糊化，实现下图效果，怎么做？
 |
 |
|---|---|
| 修改前 | 修改后 |
解决思路
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;
}
