全局渐变滚动条样式

效果如下:

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>
相关推荐
芜青2 小时前
HTML+CSS:浮动详解
前端·css·html
Sokach3865 小时前
vue3引入tailwindcss 4.1
前端·css
前端Hardy7 小时前
HTML&CSS:有趣的SVG路径动画效果
javascript·css
前端Hardy8 小时前
HTML&CSS:超酷炫的3D动态卡片
前端·javascript·css
不在了情绪11 小时前
HTML 简明教程
html
代码改变世界1008611 小时前
像素风球球大作战 HTML 游戏
前端·游戏·html
IT利刃出鞘11 小时前
HTML--pre标签的作用
前端·chrome·html
样子20181 天前
Uniapp 之renderjs解决swiper+多个video卡顿问题
前端·javascript·css·uni-app·html
CF14年老兵1 天前
「Vue 3 + View Transition 实现炫酷圆形缩放换肤动画」
前端·css·trae
前端小书童1 天前
前端开发中的css:「ink → Bootstrap → 预处理器 → Tailwind → UnoCSS」
前端·css