全局渐变滚动条样式

效果如下:

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>
相关推荐
胡gh2 小时前
css的臂膀,前端动效的利器,还是布局的“隐形陷阱”?
前端·css·html
我笔记3 小时前
css 和scss
css
浩星5 小时前
css实现类似element官网的磨砂屏幕效果
前端·javascript·css
十一.3665 小时前
103-105 添加删除记录
前端·javascript·html
用户782361677439 小时前
零基础指南:为您的网站正确配置SSL证书,只需三步
css·面试
by__csdn12 小时前
Vue3 大文件分片上传完整指南:图片/视频附件高效传输方案
前端·javascript·vue.js·typescript·vue·css3·html5
zlpzlpzyd12 小时前
vue.js 3的页面中css里的:deep()是干什么的
前端·css
大怪v12 小时前
【Virtual World 005】上帝之眼
前端·javascript·html
0思必得013 小时前
[Web自动化] HTML元素及DOM元素
前端·python·自动化·html·web自动化
李少兄13 小时前
CSS Grid 布局指南:构建现代 Web 二维布局的完整体系
前端·css·网络