全局渐变滚动条样式

效果如下:

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>
相关推荐
DogEgg_00111 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
黎金安12 小时前
前端第二次作业
前端·css·css3
阳光开朗大男孩 = ̄ω ̄=13 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
小马哥编程15 小时前
【前端基础】CSS基础
前端·css
Justinc.15 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge16 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
As977_16 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891116 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾16 小时前
前端基础-html-注册界面
前端·算法·html
我要洋人死19 小时前
导航栏及下拉菜单的实现
前端·css·css3