全局渐变滚动条样式

效果如下:

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>
相关推荐
xcLeigh2 小时前
HTML5实现好看的圣诞节网站源码
前端·html·html5·圣诞节
鑫~阳9 小时前
html + css 淘宝网实战
前端·css·html
Catherinemin9 小时前
CSS|14 z-index
前端·css
NoneCoder10 小时前
CSS系列(36)-- Containment详解
前端·css
锦亦之223311 小时前
cesium入门学习二
学习·html
学前端的小朱14 小时前
处理字体图标、js、html及其他资源
开发语言·javascript·webpack·html·打包工具
兩尛15 小时前
HTML-CSS(day01)
前端·html
荆州克莱15 小时前
Golang的性能监控指标
spring boot·spring·spring cloud·css3·技术
Simaoya16 小时前
【vue】css模拟玻璃球体效果(带高光)
前端·css·vue.js
lfl1832616216016 小时前
thingsboard 自定义html
java·前端·html