css 滚动条美化

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);

}

此乃个人学习小笔记

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器) /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸...
    紫枫_e415阅读 5,262评论 0 0
  • 滚动条组成: ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-th...
    mindy1031阅读 6,696评论 0 1
  • /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar{ width...
    龙黎_阅读 1,747评论 0 1
  • 本文章主要整理了html入门的基础知识点 图片 <img> img { border-radiuds: 3px; ...
    壞忎阅读 2,578评论 0 3
  • 16宿命:用概率思维提高你的胜算 以前的我是风险厌恶者,不喜欢去冒险,但是人生放弃了冒险,也就放弃了无数的可能。 ...
    yichen大刀阅读 11,297评论 0 4

友情链接更多精彩内容