在CSS3中，你可以使用filter屬性來實現各種濾鏡效果。filter屬性允許你應用一組預定義的圖像處理效果，如模糊、亮度調整、對比度調整等。以下是一些常用的濾鏡效果及其使用方法：
img {
filter: blur(5px);
}
img {
filter: brightness(150%);
}
img {
filter: contrast(150%);
}
img {
filter: saturate(200%);
}
img {
filter: grayscale(100%);
}
img {
filter: invert(100%);
}
div {
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}
你可以將多個濾鏡效果組合在一起使用：
img {
filter: blur(5px) brightness(150%) contrast(150%);
}
雖然opacity不是filter屬性的一部分，但它可以與濾鏡一起使用來調整元素的不透明度：
img {
filter: blur(5px);
opacity: 0.5;
}
需要注意的是，filter屬性在不同瀏覽器中的支持情況可能有所不同。為了確保兼容性，你可以使用廠商前綴：
img {
-webkit-filter: blur(5px); /* Safari 和 Chrome */
-moz-filter: blur(5px); /* Firefox */
-o-filter: blur(5px); /* Opera */
filter: blur(5px); /* 標準語法 */
}
通過這些濾鏡效果，你可以輕松地為你的網頁添加各種視覺效果，提升用戶體驗。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
