CSS實例scrollbar捲軸顏色的設定詳解-css教學-PHP中文網

CSS實例scrollbar捲軸顏色的設定詳解

黄舟

發布： 2017-07-03 11:23:50

原創

2451 人瀏覽過

正點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-ARROLLW-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樣式表的作用是控制網站的字體樣式，色彩樣式，滑鼠樣式

是以結束的形式。

其中綠色程式碼
   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中文網其他相關文章！