css 滚动条美化

最新推荐文章于 2024-07-01 12:23:56 发布

阿夏呀

最新推荐文章于 2024-07-01 12:23:56 发布

阅读量91

点赞数 1

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/summer_cloudy/article/details/120701702

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用CSS来定制网页滚动条的样式，包括设置宽度、高度、背景颜色、圆角以及鼠标悬停时的颜色变化。通过示例代码，展示了两种不同的滚动条设计风格，一种具有柔和的背景和圆润的边角，另一种则更简洁，强调高对比度。

摘要由CSDN通过智能技术生成

1.
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101F1C, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(#101F1C, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(#101F1C, 1);
}


2.
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #bdbdbd;
}
::-webkit-scrollbar-thumb:hover{
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
此乃个人学习小笔记