浏览器的默认滚动条发展到今天,已经发展到很简约的风格了,但有时候为了更好的显示效果,我们可以利用CSS代码,简单的修改一下滚动条的样式。

展示效果:Demo

浏览器的支持:

仅支持 Internet Explorer,不支持 Chrome 和 Microsoft Edge

CSS代码规则如下,先来看一下引入的CSS代码样式的格式:

SCROLLBAR-ARROW-COLOR: color; //箭头颜色
SCROLLBAR-FACE-COLOR: color;  //箭头和滚动条面板颜色
SCROLLBAR-DARKSHADOW-COLOR: color; //滚动条右下方颜色
SCROLLBAR-HIGHLIGHT-COLOR: color;  //滚动条左上方颜色
SCROLLBAR-3DLIGHT-COLOR: color;  //滚动条边缘左上颜色
SCROLLBAR-SHADOW-COLOR: color;   //滚动条边缘右下颜色
SCROLLBAR-TRACK-COLOR: color;  //滚动区域底层颜色

这里又一个 flash 小工具,点击就能下载。我们很容易可以看出每一条声明规则应用的范围;同时,还可以使用 Scrollbar 呈现出代码和结果:

Flash 自助生成工具:

scrollbar-settings

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

Next Post

Apple的0.03em,却让你望其项背

周五 8月 5 , 2016
 苹果在工业设计方面,一向是追求极致的, […]