三种侧边栏滚动条样式

wordpress5个月前发布 admin

4 0 0

在网页设计中，侧边栏滚动条样式不容忽视。它不仅关乎视觉美感，还影响用户操作体验。接下来，就让我们一同深入探究侧边栏滚动条样式的奥秘，领略其在博客等网页应用中的独特魅力与实用价值。

效果演示及代码

样式一、单色滚动条

样式二、渐变色滚动条

样式三、彩色滚动条(更优雅)

效果演示

代码

[hidecontent type=”logged”]

    ::-webkit-scrollbar-thumb {
        /* 填写自己想要的颜色 */
        background-color: #ff6666;
        height: 50px;
        outline-offset: -2px;
        outline: 2px solid #fff;
        -webkit-border-radius: 4px;
        border: 2px solid #fff;
    }

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

    ::-webkit-scrollbar-track-piece {
        background-color: #fff;
        -webkit-border-radius: 0;
    }

[/hidecontent]

效果演示

代码

[hidecontent type=”logged”]

    ::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        /* 填写自己想要的颜色 */
        background-color: #1f9ae6;
        background-image: linear-gradient(0deg, #1f9ae6 0%, #00cfd8 80%, #e4e4e4 100%);
    }

    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 10px rgb(0 0 0 / 10%);
        background: #ededed;
    }

[/hidecontent]

效果演示

代码

[hidecontent type=”logged”]

    ::-webkit-scrollbar {
        width: 5px;
        height: 1px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #12b7f5;
        background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
    }

    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #f6f6f6;
    }

[/hidecontent]