自定义滚动条生成器
使用 ::-webkit-scrollbar 美化滚动条。调整宽度、轨道和滑块颜色、圆角及悬停颜色，实时预览效果，一键复制可直接使用的CSS代码。
上下滚动此框，查看自定义滚动条效果。
调整上方控件 — 宽度、轨道颜色、滑块颜色、悬停颜色、圆角和边框 — 预览会即时更新。
基于 Webkit 的浏览器（Chrome、Safari、Edge、Opera）完全支持 ::-webkit-scrollbar。Firefox 支持较新的 scrollbar-color 和 scrollbar-width 属性，已包含在生成的CSS中。
提示：较宽的滚动条在触摸设备上更易抓取；较细的滚动条在桌面端更极简。
试试悬停 — 鼠标悬停在滑块上时颜色会改变。生成的CSS自动包含 :hover 规则。
要实现"浮动"效果，可将轨道颜色设为与页面背景相同，并给滑块添加细边框。
继续滚动以测试滚动条全长。
预览内容结束。
关于自定义滚动条生成器
自定义滚动条在基于 Chromium 的浏览器和 Safari 中通过 ::-webkit-scrollbar 系列伪元素样式化，在 Firefox 中通过 scrollbar-color / scrollbar-width 属性样式化。本工具同时输出两者，确保样式在所有主流浏览器中生效。
可控制的属性
- 宽度 — 滚动条整体粗细。
- 轨道颜色 — 滚动条槽道的背景。
- 滑块颜色 — 可拖动的手柄。
- 滑块悬停颜色 — 在
:hover时应用。 - 圆角 — 滑块的圆角。
- 滑块边框 — 边框宽度和颜色，营造"浮动"效果。
使用方法
- 设置 滚动条宽度 为所需粗细。
- 选择 轨道颜色 和 滑块颜色。
- 选择 滑块悬停颜色 增加交互感。
- 调整圆角和可选的滑块边框。
- 滚动预览框测试效果，然后点击 复制 CSS。
常见问题
Firefox 支持吗？ 支持 — 生成的CSS为 Firefox 包含 scrollbar-color 和 scrollbar-width，并为 Chromium/Safari 包含完整的 ::-webkit-scrollbar 规则。
为什么某些浏览器看不到颜色？ 部分浏览器（尤其是旧版 Firefox）仅支持双色、固定宽度模型。生成的CSS会优雅降级。
可以隐藏滚动条但保留滚动功能吗？ 可以 — 设置 scrollbar-width: none 和 ::-webkit-scrollbar { display: none; }。本工具专注于可见滚动条，但您可以编辑复制的CSS来隐藏。