我是一个甜甜的大橙子🍊,欢迎关注✉️!
我相信技术的力量💪
努力将所学分享给大家😎
你的点赞❤️分享🚀收藏📖就是对我最大的鼓励!
问题
有些图片边缘和网页背景颜色对比较明显,但是我们想将其边缘模糊化,实现下图效果,怎么做?
解决思路
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;}
参考链接