首页 > 其他分享 >css自定义滚动条

css自定义滚动条

时间:2024-07-15 14:55:31浏览次数:19  
标签:自定义 color 6px 滚动条 scrollbar background webkit css


/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 6px;
height: 6px;
background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #FFF;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #AAA;
}
————————————————

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/byc233518/article/details/78469547

标签:自定义,color,6px,滚动条,scrollbar,background,webkit,css
From: https://www.cnblogs.com/xmyfsj/p/18303146

相关文章

  • vue3+Element Plus 自定义表格单选 多选
    项目背景:用vue3+elementplus做一套考试系统功能场景:添加试题中分为客观题、主观题两种类型,在客观题会出现单选题、多选题两种类型就会导致单选题只能勾选一个答案、多选题能勾选多个答案。效果图废话不说直接上代码<el-buttonclass="btn"icon="Plus"plainst......
  • 用css样式修改svg图标颜色
    主要是利用css滤镜的投影drop-shadow来实现,方法是将原svg移动到网页看不见的地方,然后对原svg投影到原位置,影子实心不虚散,对影子进行颜色控制。 css::root{--color:#7a65ee;/*站点主题颜色*/--svg-offset:20000px;/*将原svg移出窗......
  • css外边距合并和塌陷问题
    使用margin定义块元素的垂直外边距时,可能会出现外边距的合并相邻(兄弟)块元素垂直外边距的合并当上下两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top的时候,他们之间的垂直间距不是margin-bottom和margin-top之和......
  • BottomNavigationView + ViewPager2 实现底部导航栏切换 + 自定义渐变
    com.google.android.material.bottomnavigation.BottomNavigationView缺点:自定义难度大:BottomNavigationView的默认样式和行为是为标准使用场景设计的,如果需要进行深度定制,比如复杂的动画效果或不常见的布局,可能需要大量的代码来实现。图标和文字的限制:默认情况下......
  • vue学习day09-自定义指令、插槽
    29、自定义指令(1)概念:自己定义的指令,可以封装一些dom操作,扩展额外的功能。(2)分类:1)全局注册2)局部注册3)示例:让表单元素一进入页面就获取焦点①全局注册效果:②局部注册(效果和全局注册一样,但作用范围不同)(3)指令的值自定义指令可以通过等号赋值的形式传参,这个值......
  • CSS(2)
    6.复合选择器1.后代选择器选中所有后代,包括儿子,孙子等等格式:父选择器 子选择器{CSS属性}<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0......
  • 华为云obs如何配置自定义域名
    上传pdf文件到华为云obs上后,得到的链接,如果直接访问都是下载文件,那么要如何实现访问链接直接预览文件呢。通过查看华为云的官方文档得知从2022年开始,华为云就不在支持直接访问实现预览了如何在浏览器中在线预览OBS中的对象?_对象存储服务OBS基于安全合规要求,华为云对象存储......
  • Python函数(1)--自定义函数与作用域
    函数的定义Python中的函数是一段组织好的、可重复使用的、用来实现单一或相关联功能的代码块。函数能提高应用的模块性,和代码的重复可用性。你已经知道Python提供了许多内建函数,比如print()。但你也可以自己创建函数,这被称为用户自定义函数。自定义函数假设,我们现在求一......
  • CSS 样式缓存不更新
    来自......
  • html+css+js带数据储存功能的在线多人积分系统
    积分数据储存功能是通过cookies实现的,所以如果不把该网页部署在web服务器上再去访问保存积分数据后读取积分时会提示没有积分数据。如果不想使用积分数据保存功能,那直接放到一个HTML文件中打开运行即可  源码在后面  保存积分数据后,刷新页面或重新打开,只要点击读取按钮就......