CSS3濾鏡是指一種用于圖片和文字的特殊效果,可以通過在CSS樣式表中添加一些代碼來實現。CSS3濾鏡可以用來調整圖片或文本的色彩、對比度、亮度等特征,以及增加陰影、模糊等效果。現在,我們將會介紹一些常用的CSS3濾鏡。
img { /* 灰度效果 */ filter: grayscale(100%); }
這段代碼能夠將一個圖片的顏色全部變為灰色。grayscale屬性的值范圍從0%到100%(100%表示完全灰度),這意味著您可以控制圖像的灰度程度。
img { /* 色相旋轉效果 */ filter: hue-rotate(90deg); }
這段代碼將會將圖片的顏色輪廓旋轉90度,也就是讓圖片的顏色偏紅色。hue-rotate屬性的值范圍從0deg到360deg。
img { /* 陰影效果 */ filter: drop-shadow(5px 5px 5px #000); }
這段代碼將會在圖片下方加上一個黑色陰影。drop-shadow屬性的值有兩個參數:水平和垂直偏移量(以像素為單位),以及模糊半徑(其值必須是正數),最后是陰影的顏色。
img { /* 模糊效果 */ filter: blur(5px); }
這段代碼能將圖片模糊5像素。blur屬性的值將用于產生模糊效果的像素數量。
這些只是CSS3濾鏡中的一小部分效果,您可以根據自己的需要來選擇不同的濾鏡效果。要了解有關CSS3濾鏡的更多信息,請訪問w3school官網。