cs滾動條樣式

2022-08-27 23:42:13 字數 1303 閱讀 5586

::-webkit-scrollbar

webkit支援擁有overflow屬性的區域,列表框,下拉列表,textarea的滾動條自定義樣式,所以用處還是挺大的。當然,相容所有瀏覽器的滾動條樣式目前是不存在的。

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

::-webkit-scrollbar

/*定義滾動條軌道 內陰影+圓角*/

::-webkit-scrollbar-track

/*定義滑塊 內陰影+圓角*/

::-webkit-scrollbar-thumb

:horizontal

//horizontal偽類適用於任何水平方向上的滾動條

:vertical

//vertical偽類適用於任何垂直方向的滾動條

:decrement

//decrement偽類適用於按鈕和軌道碎片。表示遞減的按鈕或軌道碎片,例如可以使區域向上或者向右移動的區域和按鈕

:increment

//increment偽類適用於按鈕和軌道碎片。表示遞增的按鈕或軌道碎片,例如可以使區域向下或者向左移動的區域和按鈕

:start

//start偽類適用於按鈕和軌道碎片。表示物件(按鈕 軌道碎片)是否放在滑塊的前面

:end

//end偽類適用於按鈕和軌道碎片。表示物件(按鈕 軌道碎片)是否放在滑塊的後面

:double-button

//double-button偽類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。也就是軌道碎片緊挨著一對在一起的按鈕。

:single-button

//single-button偽類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是乙個按鈕。也就是軌道碎片緊挨著乙個單獨的按鈕。

:no-button

no-button偽類表示軌道結束的位置沒有按鈕。

:corner-present

//corner-present偽類表示滾動條的角落是否存在。

:window-inactive

//適用於所有滾動條,表示包含滾動條的區域,焦點不在該視窗的時候。

::-webkit-scrollbar-track-piece:start

::-webkit-scrollbar-thumb:window-inactive

::-webkit-scrollbar-button:horizontal:decrement:hover

例如:::-webkit-scrollbar-button:start

::-webkit-scrollbar-button:end

樣式 滾動條

overflow x overflow y overflow 版本 css2 相容性 ie4 ns6 繼承性 無 語法 overflow visible auto hidden scroll 引數 visible 不剪下內容也不新增滾動條。假如顯式宣告此預設值,物件將被剪下為包含物件的window或...

滾動條樣式

scrollbar face color 滾動條凸出部分的顏色 scrollbar highlight color 滾動條空白部分的顏色 scrollbar shadow color 立體滾動條陰影的顏色 scrollbar 3dlight color 滾動條亮邊的顏色 scrollbar arro...

框架滾動條樣式

scrollbar face color 536bfd 滾動條表面顏色 scrollbar highlight color 536bfd 滾動條上斜面和左斜面顏色 scrollbar shadow color 536bfd 滾動條下斜面和右斜面顏色 scrollbar 3dlight color f...