我是一个甜甜的大橙子🍊，欢迎关注✉️！
我相信技术的力量💪
努力将所学分享给大家😎
你的点赞❤️分享🚀收藏📖就是对我最大的鼓励！
问题
有些图片边缘和网页背景颜色对比较明显，但是我们想将其边缘模糊化，实现下图效果，怎么做？
  修改前 |
 修改后 |
|---|
解决思路
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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/63052.html
