全局渐变滚动条样式

效果如下:

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>
相关推荐
Demoncode_y4 小时前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
Filotimo_9 小时前
2.CSS3.(3).html
前端·css3
CoderYanger10 小时前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
CodeCraft Studio10 小时前
国产化PDF处理控件Spire.PDF教程:如何在 C# 中从 HTML 和 PDF 模板生成 PDF
pdf·c#·html·.net·spire.pdf·pdf文档开发·html创建模板pdf
muyouking1110 小时前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux
软件技术NINI10 小时前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI10 小时前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
金梦人生13 小时前
Css性能优化
前端·css
写代码的皮筏艇13 小时前
CSS属性继承与特殊值
前端·css
我有一棵树13 小时前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex