1. 程式人生 > >CSS設定頁面滾動條的樣式

CSS設定頁面滾動條的樣式

谷歌裡面設定滾動條的樣式:

/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/ 
::-webkit-scrollbar 

    width: 10px; 
    height: 10px; 
    background-color: #c1e2f1; 

 
/*定義滾動條軌道 內陰影+圓角*/ 
::-webkit-scrollbar-track 

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
    background-color: #c1e2f1; 

 
/*定義滑塊 內陰影+圓角*/ 
::-webkit-scrollbar-thumb 

    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    background-color: #1f7ebe; 
}-color: #c1e2f1; 


IE瀏覽器裡面設定滾動條的樣式:

body{
 scrollbar-face-color: #1f7ebe;        /*滾動條凸出部分的顏色*/
 scrollbar-highlight-color: #1f7ebe;    /*滾動條空白部分的顏色*/
 scrollbar-shadow-color: #1f7ebe;     /*立體滾動條陰影的顏色*/
 scrollbar-3dlight-color: #1f7ebe;     /*滾動條亮邊的(www.111cn.net)顏色*/
 scrollbar-arrow-color: #1f7ebe;     /*上下按鈕上三角箭頭的顏色*/
 scrollbar-track-color: #c1e2f1;     /*滾動條的背景顏色*/
 scrollbar-darkshadow-color: #1f7ebe;     /*滾動條強陰影的顏色*/
 scrollbar-base-color: #1f7ebe;     /*滾動條的基本顏色*/
}