CSS 3濾鏡是CSS的一個強大特性,它允許我們通過CSS樣式來處理頁面元素的外觀,包括顏色、亮度、對比度、模糊、銳化等等。這些濾鏡可以讓我們實現一些特殊的效果,例如漸變、陰影、模糊等等。
下面是一些常用的CSS 3濾鏡效果:
/* 鼠標懸停時圖片顏色變深 */ .img:hover { filter: brightness(0.8) saturate(150%); } /* 照片黑白處理 */ .photo { filter: grayscale(100%); } /* 模糊文字 */ .text { filter: blur(5px); } /* 邊框效果 */ .border { filter: drop-shadow(5px 5px 5px black); }
上面的代碼中,我們使用了brightness、saturate、grayscale、blur和drop-shadow濾鏡。這些濾鏡都有不同的屬性值,可以根據具體需要進行調整。
需要注意的是,CSS 3濾鏡目前還不是所有瀏覽器都支持。這就需要我們在使用時進行兼容性測試,如果有必要,可以加上瀏覽器前綴以確保能夠正常顯示。
總的來說,CSS 3濾鏡為我們提供了更多的外觀處理選項,使得我們更能夠發揮創意和設計。隨著瀏覽器的不斷升級,我們可以期待更多強大的濾鏡效果的應用。