亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css3 實(shí)現(xiàn)滾動(dòng)條美化效果的實(shí)例代碼

  發(fā)布時(shí)間：2021-01-06 16:16:09   作者：purple_tastes   我要評論
這篇文章主要介紹了css3 實(shí)現(xiàn)滾動(dòng)條美化效果的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

具體代碼如下所示:

/*滾動(dòng)條的寬度*/

    ::-webkit-scrollbar {
        width:9px;
        height:9px;
    }

/*外層軌道?？梢杂胐isplay:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果*/

    ::-webkit-scrollbar-track {
        width: 6px;
        background-color:#0d1b20;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
    }

/*滾動(dòng)條的設(shè)置*/

    ::-webkit-scrollbar-thumb {
        background-color:#606d71;
        background-clip:padding-box;
        min-height:28px;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
    }
/*滾動(dòng)條移上去的背景*/

    ::-webkit-scrollbar-thumb:hover {
         background-color:#fff;
    }

CSS

::-webkit-scrollbar {  }
::-webkit-scrollbar-button { }
::-webkit-scrollbar-track { }
::-webkit-scrollbar-track-piece { }
::-webkit-scrollbar-thumb {  }
::-webkit-scrollbar-corner { }
::-webkit-resizer {  }

以上CSS代碼所管轄的區(qū)域?qū)完P(guān)系：以上代碼解釋

::-webkit-scrollbar 滾動(dòng)條整體部分，其中的屬性有width,height,background,border（就和一個(gè)塊級元素一樣）等。
::-webkit-scrollbar-button 滾動(dòng)條兩端的按鈕?？梢杂胐isplay:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track 外層軌道?？梢杂胐isplay:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track-piece 內(nèi)層軌道，滾動(dòng)條中間部分（除去）。
::-webkit-scrollbar-thumb 滾動(dòng)條里面可以拖動(dòng)的那部分
::-webkit-scrollbar-corner 邊角
::-webkit-resizer 定義右下角拖動(dòng)塊的樣式

到此這篇關(guān)于css3 實(shí)現(xiàn)滾動(dòng)條美化效果的實(shí)例代碼的文章就介紹到這了,更多相關(guān)css3 滾動(dòng)條美化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論