如何使用 CSS3 濾鏡模糊影像而不弄髒邊緣？

CSS3 濾鏡：如何在不弄髒邊緣的情況下模糊影像

使用CSS3 濾鏡模糊影像時，影像的邊緣也可能會變得模糊。如果您想在創建模糊效果的同時保持清晰的邊緣，這可能是不可取的。

為了解決這個問題，一個聰明的解決方案是將圖像放在

中。元素並調整其邊距。透過設定

的overflow屬性要隱藏，您可以將圖片裁切為所需的尺寸。

CSS代碼：

img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  margin: -5px -10px -10px -5px;
}

div {
  overflow: hidden;
}

說明：

• margin 屬性設定圖片周圍的邊距，圖像它以相等的距離偏移模糊邊緣amount。
• overflow：hidden 屬性可防止影像溢出到
  的邊界之外，從而創建類似於插入模糊的效果。

  範例:

  [直播示範](https://jsfiddle.n et/NI3c4/)

  HTML:

  <div>
    <img src="path/to/image.jpg" />
  </div>

  結果:

  影像被模糊並具有定義的邊緣，因為模糊區域包含在

  內。元素。

以上是如何使用 CSS3 濾鏡模糊影像而不弄髒邊緣？的詳細內容。更多資訊請關注PHP中文網其他相關文章！