css如何设置滚动条样式

最新推荐文章于 2024-05-17 04:04:51 发布

笑问客从何处来

最新推荐文章于 2024-05-17 04:04:51 发布

阅读量599

点赞数

分类专栏： web前端文章标签： css html

本文链接：https://blog.csdn.net/y_one/article/details/105117438

版权

web前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

话不多说，请看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置滚动条样式</title>
    <style>
        html{
            height: 5000px;
        }

        html::-webkit-scrollbar {/*滚动条整体样式*/
            width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }

        html::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: linear-gradient(yellow,red);
        }

        html::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 10px;
            background: #EDEDED;
        }

    </style>
</head>
<body>

</body>
</html>

效果如下：

笑问客从何处来

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css如何设置滚动条样式

话不多说，请看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>设置滚动条样式</title> <style> html{ height: 5000p...
复制链接

扫一扫

专栏目录