如何使用 CSS3 模糊濾鏡實現清晰的邊緣？

使用 CSS3 濾鏡模糊實現定義的邊緣

結合 CSS3 濾鏡來模糊圖像可增強視覺效果。然而，預設的模糊濾鏡超出了影像邊界，導致邊緣模糊。要在模糊影像的同時保持定義的邊緣，請探索以下解決方案：

解決方案：

將模糊影像包含在

中具有溢出的元素：隱藏；屬性可防止過濾器溢出父元素。另外，調整 如下面的示範程式碼所示，邊距保持邊緣銳利。

演示：

[具有定義邊緣和模糊的所需輸出圖像背景]

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

HTML:

<div><img src="http://placekitten.com/300" /></div>

以上是如何使用 CSS3 模糊濾鏡實現清晰的邊緣？的詳細內容。更多資訊請關注PHP中文網其他相關文章！