滾動條樣式設定
阿新 • • 發佈：2022-01-02
{
scrollbar-arrow-color: red; /*上下按鈕上三角箭頭的顏色*/
scrollbar-face-color: #CBCBCB; /*滾動條凸出部分的顏色*/
scrollbar-3dlight-color: blue; /*滾動條亮邊的顏色*/
scrollbar-highlight-color: #333; /*滾動條空白部分的顏色*/
scrollbar-shadow-color: yellow; /*滾動條陰影的顏色*/
scrollbar-darkshadow-color: green; /*滾動條強陰影的顏色*/
scrollbar-track-color: #eee; /*滾動條背景顏色*/
scrollbar-base-color: black; /*滾動條的基本顏色*/
Cursor:url(mouse.cur); /*自定義個性滑鼠*/
/*以上2項適用與：body、div、textarea、iframe*/
}
::-webkit-scrollbar { /* 滾動條整體部分 */
width:10px;
margin-right:2px
}
::-webkit-scrollbar-button { /* 滾動條兩端的按鈕 */
width:10px;
background-color: yellow;
}
::-webkit-scrollbar:horizontal {
height:10px;
margin-bottom:2px
}
::-webkit-scrollbar-track { /* 外層軌道 */
border-radius: 10px;
}
::-webkit-scrollbar-track-piece { /*內層軌道，滾動條中間部分 */
background-color: #333333;
border-radius: 10px;
}
::-webkit-scrollbar-thumb { /* 滑塊 */
width:10px;
border-radius: 5px;
background: #CBCBCB;
}
::-webkit-scrollbar-corner { /* 邊角 */
width: 10px;
background-color: red;
}
::-webkit-scrollbar-thumb:hover { /* 滑鼠移入滑塊 */
background: #909090;
}