在網頁設計中經常會用到邊緣模糊的照片，這類照片由于邊緣演變漸變，在壓縮時很容易出現邊緣鋸齒化的問題，因此不得不采用較高質量的圖片，導致網頁體積的增大。事實上，使用CSS3的新特性可以很容易實現各種圖片邊緣的模糊效果。效果如下圖

首先，需要在圖片標簽外部套一層DIV標簽：

<div class="cover">
  <img src="photo.png" alt="photo">
</div>

然后只需要為外層DIV添加一圈向內的邊緣陰影，以模擬圖片邊緣模糊效果，CSS樣式如下：

.cover {
    width: 300px;
    height: 300px;
    position: relative;
}
.cover:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow:0 0 50px 30px #ffffff inset;
}
img{
    width: 300px;
    height: 300px;
    display: block;
    margin-bottom: 20px;
}

注意直接為外層DIV添加邊緣陰影是看不到效果的，因為陰影會被圖片遮住，必須通過一個絕對定位的偽元素添加陰影。

總結

以上是生活随笔為你收集整理的CSS3实现图片边缘模糊效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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