CSS 设置滚动条样式

花铛

已于 2025-01-17 16:27:06 修改

阅读量748

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS

于 2019-12-02 08:49:19 首次发布

本文链接：https://blog.youkuaiyun.com/wsln_123456/article/details/103342713

CSS 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在Chrome浏览器中自定义滚动条的样式，包括滑块的颜色设定及滚动条的整体尺寸调整，实现美观且个性化的网页设计。

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

目前，基于 webkit 内核的浏览器总体市场占用率比较高；特别是在移动端，大部分浏览器都是基于 webkit。

/*定义滑块*/
::-webkit-scrollbar-thumb {
  background:rgba(1,172,213,0.6);
}
/* 滑动条样式 */
::-webkit-scrollbar{
  width: 6px;
  height:6px;
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
  background:rgba(255,255,255,1);
  border:1px solid rgba(159,177,195,1);
}