【CSS】改变滚动条样式，给滚动条小姐姐化个妆

tanpenggood

于 2020-05-27 16:00:39 发布

阅读量554

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS系列

本文为【tanpenggood】原创文章，允许转载，但转载必须注明出处并附带首发链接！

本文链接：https://blog.youkuaiyun.com/AV_woaijava/article/details/106383278

CSS系列专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS定制Windows下滚动条的外观，包括调整宽度、背景颜色及圆角等属性，实现美观且个性化的滚动条样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

众所周知，Windows 下渲染的原生滚动条并不是那么好看。
既然我们知道 CSS 相当于化妆品，那么我们怎么通过 CSS 让滚动条小姐姐变个妆呢？

Windows 7下的默认滚动条样式
在这里插入图片描述

talk is cheap, show me the code.

::-webkit-scrollbar{
	width:8px;
	height:8px;
}
::-webkit-scrollbar-track{
	background: #f6f6f6;
	border-radius:2px;
}
::-webkit-scrollbar-thumb{
	background: #cdcdcd;
	border-radius:2px;
}
::-webkit-scrollbar-thumb:hover{
	background: #747474;
}
::-webkit-scrollbar-corner {
	background: #f6f6f6;
}