码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • vue3+elementPlus table滚动条样式覆盖


    1. /* ---el-table滚动条公共样式--- */
    2. .el-scrollbar {
    3.   // 横向滚动条
    4.   .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
    5.     opacity: 1; // 默认滚动条自带透明度
    6.     height: 8px; // 横向滑块的宽度
    7.     border-radius: 2px; // 圆角度数
    8.     background-color: rgba(136, 219, 255, 1); // 滑块背景色
    9.     box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影
    10.   }
    11.   // 纵向滚动条
    12.   .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
    13.     opacity: 1;
    14.     width: 8px; // 纵向滑块的宽度
    15.     border-radius: 2px;
    16.     background-color: rgba(136, 219, 255, 1);
    17.     box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    18.   }
    19. }

    补充---原生滚动条样式修改:

    1. /* ---滚动条公共样式--- */
    2. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    3. ::-webkit-scrollbar {
    4. width: 8px;
    5. height: 8px;
    6. }
    7. /*定义滚动条轨道 内阴影+圆角*/
    8. ::-webkit-scrollbar-track {
    9. -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); /*轨道阴影*/
    10. border-radius: 0px; /*轨道背景区域的圆角*/
    11. background-color: transparent; /*轨道的背景颜色*/
    12. }
    13. /*定义滑块 内阴影+圆角*/
    14. ::-webkit-scrollbar-thumb {
    15. border-radius: 2px; /*滑块圆角*/
    16. -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); /*滑块外阴影*/
    17. background-color: rgba(136, 219, 255, 1); /*滑块背景颜色*/
    18. }

  • 相关阅读:
    3、自然语言和单词的分布式表示(下)
    Python爬虫
    turn搭建测试
    JAVA之springMVC
    CS 611 Legends: Monsters and Heroes
    银河麒麟V10 SP2 auditd服务内存泄露问题
    Linux 主机数据拷贝与 Linux 服务器之间拷贝文件的方法
    Q学习与Sarsa
    研发效能之技术治理&技术治理架构师
    小啊呜产品读书笔记001:《邱岳的产品手记-04》第07+08讲 关于需求变更
  • 原文地址:https://blog.csdn.net/beihenanfei/article/details/133941840
  • 最新文章
  • 【JVM】编译执行与解释执行的区别是什么?JVM 使用哪种方式?
    用 Hashids 优雅解决 C 端自增 ID 暴露问题
    V8引擎 精品漫游指南--Ignition篇(上) 指令 栈帧 槽位 调用约定 内存布局 基础内容
    LLVM Pass快速入门(四):代码插桩
    milkup:桌面端 markdown AI续写和即时渲染
    基于项目工程构建SBOM(软件物料清单)的研究
    鸿蒙应用开发UI基础第二节:鸿蒙应用程序框架核心解析与实操
    .NET 中如何快速实现 List 集合去重?
    扣子Coze实战:从0到1打造抖音+小红书热点监控智能体
    浅谈数据访问层
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号