瀏覽器滾動條樣式更改
阿新 • • 發佈:2018-03-07
color gpo lac 圖片 clas http borde radius 背景
body{ 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; }
瀏覽器滾動條樣式更改