css滚动条样式实验室

蓝斑.json

于 2024-01-10 09:43:08 发布

阅读量386

点赞数 12

分类专栏： HTML Css 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/m0_73358221/article/details/135495548

版权

HTML 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

Css

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS和Webkit前缀在HTML中创建具有渐变背景的滚动条效果，展示了如何定制滚动滑块和轨道的样式。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动条实验室</title>
</head>
<style>
    body {
        background: url(./img/2-zhi.gif);
        background-size: 330px;
        SCROLLBAR-FACE-COLOR: #f892cc;

    }

    /* 整句的滚动条 */
    ::-webkit-scrollbar {
        width: 5px;

    }

    /*滚动条的箭头*/
    ::-webkit-scrollbar-button {
        background-color: slateblue;
        height: 1px;
    }

    /* 滚动条上的滚动滑块 */
    ::-webkit-scrollbar-thumb {
        background-color: #49b1f5;
        /* 关键代码 */
        background-image: -webkit-linear-gradient(45deg,
                rgba(255, 255, 255, 0.4) 25%,
                transparent 25%,
                transparent 50%,
                rgba(255, 255, 255, 0.4) 50%,
                rgba(255, 255, 255, 0.4) 75%,
                transparent 75%,
                transparent);
        border-radius: 32px;
    }


    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
        background-color: #ff00bb;
        border-radius: 32px;
    }


    #dv1 {
        width: 300px;
        height: 50px;
        margin: auto;
        overflow: auto;
    }

    i #over {
        overflow: auto;
        height: 500px;
        background: rgba(14, 201, 151, 0.6);
        margin: auto;
        border-radius: 10px;
        width: 97%;
        box-shadow: 0px 1px 10px 1px rgb(224, 181, 151);
    }
</style>

<body>

    <h1 style=" text-align:center;color:#fb902a;font-size:40px; ">蓝斑.json的实验室</h1>
</body>

<body>
    <div id="over">


    </div>
    <h1 style=" text-align:center;color:#fb902a;font-size:40px; ">蓝斑.json的实验室</h1>
</body>

</html>