CSS 滚动条生成器

Chrome、Safari 和 Edge 风格的滚动条，带有 ::-webkit-scrollbar 系列伪元素：轨道、拇指和拇指悬停状态的单独规则，以及像素精确宽度和拇指边框半径。 Firefox 完全忽略了所有这些，而是​​读取两个标准属性：滚动条宽度和滚动条颜色，这些属性后来进入了 CSS 滚动条规范。它们不是同一功能的两种方言——它们是具有不同上限的两种不同的功能集，并且大多数滚动条生成器仅通过显示 WebKit 结果来悄悄地掩盖间隙。这个没有。

设置宽度、轨道颜色、缩略图颜色、悬停颜色和缩略图角半径一次，该工具就会根据相同的输入构建两个规则集。 WebKit 块范围 ::-webkit-scrollbar、::-webkit-scrollbar-track、::-webkit-scrollbar-thumb 及其 :hover 状态位于左侧演示框，因此您看到的正是 Chrome、Safari 和 Edge 渲染的内容 — 浏览器自己的真实引擎，而不是模拟的覆盖层。 Firefox 块使用同一浏览器自己的引擎在右侧演示框中设置滚动条宽度和滚动条颜色，这就是为什么只有当该页面实际在 Firefox 中打开时该框才会看起来不同；在 WebKit 浏览器中，它会显示自己的默认滚动条，并且该工具是这样说的，而不是用借用的像素来伪造 Firefox 的外观。

宽度映射是间隙的最明显示例：Firefox 的滚动条宽度仅接受关键字 auto、thin 或 none — 从来不接受精确的像素数字。该生成器会诚实地映射您选择的宽度（8px 及以下会变薄，任何较宽的都会变自动）并在您的输入旁边显示生成的关键字，而不是发明一个不存在的虚假像素完美的 Firefox 结果。 Firefox 也无法设置单独的悬停颜色、独立的拇指边框半径或轨道颜色（不仅仅是滚动条​​颜色的第二个值）——这些是平台的永久、真正的限制，而不是该工具的遗漏。

复制组合的 CSS 块，两个规则集一起移动，每个规则集都有自己的注释，准备按原样粘贴到样式表中。当您拖动控件时，所有内容都会在您自己的浏览器中呈现和更新 - 无需上传，无需帐户，无需服务器往返，并且一旦页面加载，它就会保持离线工作。