cari

Rumah  >  Artikel  >  hujung hadapan web  >  CSS实例scrollbar滚动条颜色的设置详解

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

黄舟
黄舟asal
2017-07-03 11:23:502414semak imbas

正点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);

Atas ialah kandungan terperinci CSS实例scrollbar滚动条颜色的设置详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：关于DIV滚动条火狐兼容 求js模块scrollbar-dark-shadow-color:#eee;Artikel seterusnya：css中scrollbar-base-color与scrollbar-face-color的区别

Artikel berkaitan

Lihat lagi