我是一個甜甜的大橙子🍊，歡迎關注??！
我相信技術的力量💪
努力將所學分享給大家😎
你的點贊??分享🚀收藏📖就是對我最大的鼓勵！

問題

有些圖片邊緣和網頁背景顏色對比較明顯，但是我們想將其邊緣模糊化，實現下圖效果，怎么做？

修改前修改后

解決思路

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; }

參考鏈接

總結

以上是生活随笔為你收集整理的【css】css实现图片或动图边缘模糊化处理（附示例代码）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。