css 滾動(dòng)條美化

1.

::-webkit-scrollbar {

? width: 6px;

? height: 6px;

}

::-webkit-scrollbar-track {

? width: 6px;

? background: rgba(#101F1C, 0.1);

? -webkit-border-radius: 2em;

? -moz-border-radius: 2em;

? border-radius: 2em;

}

::-webkit-scrollbar-thumb {

? background-color: rgba(#101F1C, 0.5);

? background-clip: padding-box;

? min-height: 28px;

? -webkit-border-radius: 2em;

? -moz-border-radius: 2em;

? border-radius: 2em;

}

::-webkit-scrollbar-thumb:hover {

? background-color: rgba(#101F1C, 1);

}

2.

::-webkit-scrollbar {

? ? width: 5px;

? ? height: 5px;

? ? background-color: #F5F5F5;

}

::-webkit-scrollbar-thumb{

? ? border-radius: 10px;

? ? -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

? ? background-color: #bdbdbd;

}

::-webkit-scrollbar-thumb:hover{

? ? border-radius: 5px;

? ? -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

? ? background: rgba(0,0,0,0.2);

}

此乃個(gè)人學(xué)習(xí)小筆記

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • CSS3或CSS+JS實(shí)現(xiàn)改變滾動(dòng)條樣式(兼容所有瀏覽器) /*定義滾動(dòng)條高寬及背景 高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸...
    紫楓_e415閱讀 1,485評(píng)論 0 0
  • 滾動(dòng)條組成: ::-webkit-scrollbar 滾動(dòng)條整體部分 ::-webkit-scrollbar-th...
    mindy1031閱讀 2,321評(píng)論 0 1
  • /*定義滾動(dòng)條高寬及背景 高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/ ::-webkit-scrollbar{ width...
    龍黎_閱讀 274評(píng)論 0 1
  • 本文章主要整理了html入門(mén)的基礎(chǔ)知識(shí)點(diǎn) 圖片 <img> img { border-radiuds: 3px; ...
    壞忎閱讀 390評(píng)論 0 3
  • 16宿命:用概率思維提高你的勝算 以前的我是風(fēng)險(xiǎn)厭惡者,不喜歡去冒險(xiǎn),但是人生放棄了冒險(xiǎn),也就放棄了無(wú)數(shù)的可能。 ...
    yichen大刀閱讀 7,573評(píng)論 0 4

友情鏈接更多精彩內(nèi)容