全局渐变滚动条样式

效果如下:

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>
相关推荐
a11177615 小时前
粒子化系统(3D-Particles)THreeJS react
前端·html·jetson
码农君莫笑15 小时前
深入理解 CSS Grid 布局:从入门到实战
前端·css
半壶清水17 小时前
用python脚本加html自建的书法字典
开发语言·python·html
用户0595401744618 小时前
把Agent记忆测试从Mock换到真实Redis,漏测率从30%降到0
前端·css
YG亲测源码屋20 小时前
html表白代码大全可复制免费 html表白网页制作源码
前端·html
LIUAWEIO1 天前
CSS 让鼠标呈现手型,鼠标悬浮变小手
css·html·css3·html5
ZC跨境爬虫2 天前
跟着 MDN 学CSS day_51:支持旧浏览器的布局策略
前端·css·html·tensorflow·媒体
Larcher2 天前
从 0 到 1:Node.js 调用 AI API 的完整避坑指南
前端·javascript·css
八目蛛2 天前
八目蛛网络(免费工具网站导航)
css·vue.js·开源·vue3·html5·ai编程
xiangxiongfly9152 天前
CSS @layer总结
css·layer