浏览器滚动条自定义

Zhencode

于 2021-07-19 10:46:17 发布

阅读量113

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/Zhencode/article/details/118890754

版权

html 专栏收录该内容

10 篇文章

订阅专栏

这篇博客详细介绍了如何使用CSS的伪元素`::-webkit-scrollbar`、`::-webkit-scrollbar-track`和`::-webkit-scrollbar-thumb`来定制网页滚动条的样式。通过设置宽度、高度、背景颜色以及渐变效果，实现了美观且具有透明轨迹和独特滑动方块样式的滚动条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 		/*整个滚动条*/
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
            background-color: #ffffff;
        }
        /*滑动轨迹*/
        ::-webkit-scrollbar-track {
            background-color: transparent;
        }
        /*滑动方块*/
        ::-webkit-scrollbar-thumb {
            border-radius: 3px;
            background-image: linear-gradient(135deg, #09f, #3c9);
        }