首页 > 其他分享 >css如何美化滚动条

css如何美化滚动条

时间:2022-10-09 17:26:04浏览次数:47  
标签:color 6px 滚动条 scrollbar css background webkit 美化

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #f5f5f5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #c8c8c8;
}

 代码2

/*滚动轴样式*/
@media screen and (min-width:768px) {
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 8px;
        height: 9px;
        background: transparent;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: #c1c1c1;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8a8a8;
    }

    .mini-bar::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .mini-bar::-webkit-scrollbar-thumb {
        border-radius: 3px;
    }
}

 

标签:color,6px,滚动条,scrollbar,css,background,webkit,美化
From: https://www.cnblogs.com/panziwen/p/16772857.html

相关文章

  • css img神奇的缝隙
    <divclass="wrap"><imgsrc="a.jpg"alt="">dragaasdf<divclass="rect"></div></div>.wrap{font-size:100px;}.rect{width:500px;height:200px;backgrou......
  • css设置字体闪烁
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>文字闪烁</title></head><body><spanid="blink"><b>奇葩天地网</b></span><scri......
  • 直播平台搭建源码,css预加载旋转动画 与 流光字体
    直播平台搭建源码,css预加载旋转动画与流光字体一、预加载旋转动画Html<viewclass="concentric_round"></view>​cssbody{}.concentric_round{width:200rpx;heig......
  • CSS布局
    传统网页布局的三种方式标准流/普通流/文档流(块级元素独占一行,从上往下排列,行内元素从左到右按顺序排列)浮动定位多个块元素纵向排列用标准流,多个块元素横向排列用浮......
  • css颜色渐变属性
    linear-gradient(颜色渐变,)例:toleft设置渐变方向,也可以换成toright=>totop=>tobottombackground:linear-gradient(toleft,#6be585,#dd3e54);效果图: ......
  • CSS动画(animation)
    CSS动画什么是CSS动画?动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的CSS属性。如需使用CSS动画,您必须首先为动画指定一些关键帧。关键帧......
  • vue-4 CSS绑定/Style绑定
    <template><div><divclass="border-style"><h1:class="class3">-----------------CSS绑定-------------------</h1><div:class="{'c1':clEnable......
  • 【前端必会】CSS动画,的确很简单
    背景用css动画让你的页面交互动起来开始<body><buttonid="button">开始</button><divid="block"></div></body><script>document.getElementById("button"......
  • JavaWeb--CSS基础
    JavaWeb--CSS概念CascadingStyleSheets层叠样式表层叠:多个样式可以作用在同一个html的元素上,同时生效好处:功能强大将内容展示和样式控制分离降低耦......
  • css动画边框
    效果图: 代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><style>*{margin:0;......