一、文章引导
二、博主简介
🌏博客首页： 春波petal
📑文章摘要：前端 浏览器滚动条美化
💌春波寄语：故木秀于林，风必摧之；堆出于岸，流必湍之；行高于人，众必非之。
三、文章内容
废话不多说，直接copy代码使用
文章来源：https://www.toymoban.com/news/detail-781782.html
1、在public文件夹下 创建index.css 文件
/*index.css*/
/* 修改滚动条宽度 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 修改滚动条颜色 */
::-webkit-scrollbar-thumb {
background-color: #1890ff;
background-image: -webkit-linear-gradient(45deg,
hsla(0, 0%, 100%, 0.4) 25%,
transparent 0,
transparent 50%,
hsla(0, 0%, 100%, 0.4) 0,
hsla(0, 0%, 100%, 0.4) 75%,
transparent 0,
transparent);
border-radius: 2em;
}
::-webkit-scrollbar-corner {
background-color: transparent;
}
/* 修改滚动条轨道颜色 */
::-webkit-scrollbar-track {
background-color: #f5f5f5;
border-radius: 5px;
}
2、在index.html 中引入
<link rel="stylesheet" href="/index.css">
四、程序语录
本篇博客文章模板唯一版权归属©春波petal文章来源地址https://www.toymoban.com/news/detail-781782.html
到了这里，关于前端浏览器滚动条炫酷美化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
