首页 > 文章 > web前端 > CSS实例scrollbar滚动条颜色的设置详解

CSS实例scrollbar滚动条颜色的设置详解

黄舟原创: 2017-07-03 11:23:502369浏览

正点CSS实例---scrollbar 滚动条颜色设置

<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
*********************
<STYLE>{
SCROLLBAR-FACE-COLOR:#3399cc; 
SCROLLBAR-HIGHLIGHT-COLOR: white; 
SCROLLBAR-SHADOW-COLOR: white; 
SCROLLBAR-ARROW-COLOR: #ffffff; 
SCROLLBAR-BASE-COLOR:#dff0c0}
</STYLE>

其中SCROLLBAR-FACE-COLOR、SCROLLBAR-HIGHLIGHT-COLOR、SCROLLBAR-SHADOW-COLOR、SCROLLBAR-ARROW-COLOR、SCROLLBAR-BASE-COLOR、SCROLLBAR-DARKSHADOW-COLOR分别用于指定滚动条不同部分的颜色(根据意思就知道它们分别代表了滚动条的什么部分）。
只需在页面HTML代码之间加这几行代码即可！！！！
：）

**********************************************

滚动条即网页右侧（下面）的竖向（横向）条。滚动条的颜色可以通过写CSS样式表，得到改变。
本页面就用到了绿色的滚动条。

滚动条的CSS样式表：

 <style>
BODY {
   scrollbar-face-color: #008000;
   scrollbar-highlight-color: #0B0E2F;
   scrollbar-3dlight-color: #0B0E2F;
   scrollbar-darkshadow-color: #0B0E2F;
   scrollbar-shadow-color: #003366;
   scrollbar-arrow-color: #003366;
   scrollbar-track-color: #FFFFFF;}
</style>

CSS样式表的作用是控制网站的字体样式，色彩样式，鼠标样式

是以 c9ccee2e6ea535a969eb3f532ad9fe89 开头， 531ac245ce3e4fe3d50054a55f265927 结束的形式。

其中绿色代码
   scrollbar-face-color: #008000;－－滚动条条棒的颜色
   scrollbar-highlight-color: #0B0E2F;－－滚动条高光的颜色
   scrollbar-3dlight-color: #0B0E2F;－－滚动条3D的颜色
   scrollbar-darkshadow-color: #0B0E2F;－－滚动条深阴影的颜色
   scrollbar-shadow-color: #003366;－－滚动条阴影的颜色
   scrollbar-arrow-color: #003366;－－滚动条箭头的颜色
   scrollbar-track-color: #FFFFFF;}－－滚动条背景的颜色

????
????
“#008000”是色彩的三原色代码，可以自己随意调色，替换成不同的颜色。

*******************************************************************

<STYLE>  
BODY  {  
SCROLLBAR-FACE-COLOR:  #fc0000;  
 SCROLLBAR-HIGHLIGHT-COLOR:  #fc0000;  
 SCROLLBAR-SHADOW-COLOR:  #fc0000;  
 SCROLLBAR-3DLIGHT-COLOR:  #fc0000;  
 SCROLLBAR-ARROW-COLOR:  #fcfc00;  
 SCROLLBAR-TRACK-COLOR:  #fc4800;  
 SCROLLBAR-DARKSHADOW-COLOR:  #fc0000;  
 SCROLLBAR-BASE-COLOR:  #fc0000  
}  
</STYLE>

*******************************************************************

body {
font-size:9pt;
color:#000099; cursor:url(meng.cur);
OVERFLOW-X
: auto; OVERFLOW: scroll;
SCROLLBAR-FACE-COLOR: #817af3;
SCROLLBAR-HIGHLIGHT-COLOR: #817af3;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #817af3;
SCROLLBAR-ARROW-COLOR: #e8f7e6;
SCROLLBAR-TRACK-COLOR: 817af3
SCROLLBAR-DARKSHADOW-COLOR: #e8f7e6;
}

332分屏滚动条颜色设置

将其他的滚动条代码都删了，只加下面的代码。各对应颜色都有说明了。

 set
Time
out(function setScrollbar(){      //color=Array
(面部颜色,上左斜面,下右斜面,上左边沿,箭头,底版色,下右边沿)      
color=Array("#EDE6DA","#EDE6DA","#EDE6DA","#EDE6DA","#84674A","#EDE6DA","#EDE6DA");      
box=Array("u","u1","d","r")
      for (var i=0;i<box.length;i++){            
eval("parent."+box[i]+".
document
.body.style.scrollbarFaceColor=color[0]");            
eval("parent."+box[i]+".document.body.style.scrollbarHighlightColor=color[1]");            
eval("parent."+box[i]+".document.body.style.scrollbarShadowColor=color[2]");
            eval("parent."+box[i]+".document.body.style.scrollbar3dLightColor=color[3]");            
eval("parent."+box[i]+".document.body.style.scrollbarArrowColor=color[4]");            
eval("parent."+box[i]+".document.body.style.scrollbarTrackColor=color[5]");
            eval("parent."+box[i]+".document.body.style.scrollbarDarkShadowColor=color[6]");      
};
setTimeout("setScrollbar()",300); 
},300);

以上是CSS实例scrollbar滚动条颜色的设置详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：关于DIV滚动条火狐兼容求js模块scrollbar-dark-shadow-color:#eee;下一篇：css中scrollbar-base-color与scrollbar-face-color的区别

查看更多