全局渐变滚动条样式

效果如下:

javascript 复制代码
APP.vue

<style>
/* 整个滚动条 */
::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    /* 关键代码 */
    background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, 0.4) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.4) 75%,
            transparent 75%,
            transparent);
    border-radius: 32px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #dbeffd;
    border-radius: 32px;
}
</style>
相关推荐
用户3153247795453 小时前
Tailwind CSS 学习手册
前端·css
拜无忧8 小时前
css卡片,重叠div,顶部错开,底部对齐
css
纯情小萝卜9 小时前
2026前端CSS黑科技技巧
css
bluceli2 天前
CSS容器查询:响应式设计的新范式
前端·css
Bigger2 天前
CSS 这些年都经历了什么?一次看懂 CSS 的演化史
前端·css·前端工程化
anOnion3 天前
构建无障碍组件之Switch Pattern
前端·html·交互设计
大漠_w3cpluscom3 天前
使用 clip-path: shape() 创建 Squircle 形状
前端·css·weui
会员源码网5 天前
告别参数混乱:如何优雅解决方法参数过多导致的可维护性难题
css
Lee川6 天前
现代Web开发中的CSS继承、Flexbox布局与LocalStorage交互:从文档解析到实践应用
前端·css
helloweilei7 天前
CSS进阶: background-clip
css