css3关于滚动条的设置

紫微前端

于 2022-05-19 09:19:03 发布

阅读量525

点赞数

分类专栏：常用代码片段文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/124856281

版权

常用代码片段专栏收录该内容

168 篇文章 ¥39.90 ¥99.00

订阅专栏

本文介绍了如何使用CSS3来定制网页滚动条的外观和行为，包括改变滚动条的颜色、宽度、滑块以及轨道等样式，提升网页界面的美观度和用户体验。

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

/* 滚动条凹槽的颜色，还可以设置边框属性 */
*::-webkit-scrollbar-track-piece {
  background-color: #f8f8f8;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/* 滚动条的宽度 */
*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* 滚动条的设置 */
*::-webkit-scrollbar-thumb {
  background-color: #ddd;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  background-clip: padding-box;
}

/* 滚动条鼠标移上去 */
*::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}