css滚动条样式设置成mac的样式

最新推荐文章于 2025-03-03 19:32:53 发布

蓝色之恋love

最新推荐文章于 2025-03-03 19:32:53 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.csdn.net/raingrains/article/details/124425725

本文详细介绍了如何使用CSS来定义网页中的滚动条样式，包括设置滚动条的宽度、轨道背景、滑块颜色等，以实现更美观的用户体验。通过`::-webkit-scrollbar`、`::-webkit-scrollbar-track`和`::-webkit-scrollbar-thumb`选择器，可以定制滚动条的各个部分，如内阴影、圆角以及不同状态下的背景颜色。

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


/* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
  border-radius: 10px;
  background-color: rgba(50, 50, 50, .1);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
  background-color: rgba(50, 50, 50, .3);
}