css优化滚动条样式

最新推荐文章于 2025-06-30 14:41:02 发布

原创最新推荐文章于 2025-06-30 14:41:02 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

40 篇文章

订阅专栏

本文深入探讨了CSS中滚动条样式的定制方法，通过详细解析各伪元素属性，如::-webkit-scrollbar-track-piece, ::-webkit-scrollbar等，帮助读者掌握如何精细调整网页滚动条的外观，包括宽度、高度、背景颜色及圆角效果。

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

::-webkit-scrollbar-track-piece {
  -webkit-border-radius: 0
}
::-webkit-scrollbar {
  width: 5px;
  height: 10px
}
::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: #b8b8b8;
  -webkit-border-radius: 6px;
  outline-offset: -2px;
  filter: alpha(opacity = 50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5
}
::-webkit-scrollbar-thumb:hover {
  height: 50px;
  background-color: #878987;
  -webkit-border-radius: 6px
}