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