CSS濾鏡Chroma在滾動條上的應用

從前做電子書的時候曾經用到過這個屬性,當時并沒有在意。不過現在覺得,這個屬性應用在超市索引頁中甚合我意,原因是個人越來越鐘愛線條簡潔、簡單的風格。一般的滾動條部分代碼形如:

filter: chroma(color=#D4D4D4);
scrollbar-3dlight-color: #D4D4D4; /*立体滚动条亮边的颜色*/图1
scrollbar-highlight-color: #D4D4D4; /*滚动条空白部分的颜色*/图2
scrollbar-shadow-color: #D4D4D4; /*立体滚动条阴影的颜色*/图3
scrollbar-darkshadow-color: #D4D4D4; /*立体滚动条强阴影的颜色*/图4
scrollbar-face-color: #D4D4D4; /*立体滚动条的颜色*/图5
scrollbar-arrow-color: #FFFFFF; /*三角箭头的颜色*/图6
scrollbar-track-color: #D4D4D4; /*立体滚动条背景颜色*/图7
scrollbar-base-color: #D4D4D4; /*滚动条的基本颜色*/

scrollbar
语法:

filter: chroma(color=#D4D4D4)

其中“#D4D4D4”是颜色值。

作用效果:如果滤镜中的像素有颜色与设定的颜色相同,则该像素变为透明。上面顯示的結果就是只有兩個箭頭,這是為了更好地融入到背景中,把滾動條的其他顏色“過濾”掉了。由于默認滾動條有許多顏色,所以我把所有顏色統一后,只留下一個顯示上拉和下拉箭頭scrollbar-arrow-color的顏色,然后應用chroma濾鏡就實現了這種效果。不過這是IE專有屬性,用Firefox或Opera就看不到效果了……

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料