CSS滾動條樣式

原文鏈接:https://www.jianshu.com/p/c2addb233acd
        <style>
        /* 設置滾動條的樣式 */
        ::-webkit-scrollbar {
            width:8px;/*高寬分別對應橫豎滾動條的尺寸*/
            height: 8px;
            background-color: #edede6;
        }

        /* 滾動槽 */
        ::-webkit-scrollbar-track {
            border-radius:10px;
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            background   : #ededed;
        }

        /* 滾動條滑塊 */
        ::-webkit-scrollbar-thumb {
            border-radius:10px;
            background-color: skyblue;
            background-image: -webkit-linear-gradient(
                    45deg,
                    rgba(255, 255, 255, 0.2) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, 0.2) 50%,
                    rgba(255, 255, 255, 0.2) 75%,
                    transparent 75%,
                    transparent
            );
        }
        </style>

效果:

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章