從前做電子書的時候曾經用到過這個屬性,當時并沒有在意。不過現在覺得,這個屬性應用在超市索引頁中甚合我意。原因是個人越來越鐘愛線條簡潔、簡單的風格。拿個電子書演示一下,請注意滾動條滴說。地址:《重慶空姐》
注意到,滾動條部分的代碼是

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

常用超市製作工具對比
Xnview 調用函數標簽






