8 个 CSS 辅助工具

1- 游标属性

2- 过滤属性游乐场

3- 改造房地产游乐场

4-盒子阴影生成器

5- :nth-选择器

6 - 边框半径生成器

7-梯度生成器

8-调色板生成器

虽然 CSS 并不复杂，但当我开始学习它时，有些部分对我来说很神秘。例如，如何组合多个 box-shadow 或 background-image 属性。因此，我设计了这些 Playgrounds，让 CSS 的使用更加轻松高效。

这里有 8 个可用于提高 CSS 生产力的游乐场。

1- 游标属性

从一个简单的开始。你可以查看 cursor 属性的不同值。将鼠标悬停在每个框上，看看光标在浏览器中是什么样子的。

2- 过滤属性游乐场

这个 Playground 可以帮助你直观地了解不同滤镜值的作用。你可以堆叠不同的滤镜，修改它们的值，并准备好 CSS 代码以供使用。

3- 改造房地产游乐场

揭秘另一个 CSS 属性。由于每个值都会影响后续的变换值，因此这个 CSS 属性可能难以管理。使用此 Playground，您可以添加一组变换、设置 transform-origin 并获取 CSS 代码。

4-盒子阴影生成器

如果处理得当，在设计中使用阴影是一个不错的选择。这就是盒子阴影生成器的功能。您可以添加一堆盒子阴影，然后获取生成的 CSS。

5- :nth-选择器

CSS 提供了丰富的选择器选项来定位特定元素。:nth-selectors（nth-child 和 nth-of-type）就是一个例子。虽然它们在很多情况下都非常有用，但它们的用法却有些难以理解。

http://nthmaster.com/网站提供了很棒的使用示例，但视觉效果不太好。用这支笔来实时查看不同选择器的工作原理。

6 - 边框半径生成器

border-radius 属性一开始并不难理解。但是一旦用 8 个值而不是 4 个值，可能会让人感到困惑。
不知道我在说什么？！看看这支笔，然后禁用简单模式。

7-梯度生成器

渐变生成器并不缺，但却没有一款是一站式的渐变生成器。有些缺乏良好的用户界面，或者提供的选项不够多。

此工具提供了一个直观且“完整”的生成器。它拥有 500 多个预设，您可以控制几乎所有渐变方面，例如颜色、大小、形状、类型，甚至可以堆叠多个渐变。

确保单击信息按钮以获取有关该工具及其使用方法的更多信息。

8-调色板生成器

此工具不会为 CSS 属性生成值，而是为具有颜色组合的资产生成补充工具。

这款生成器解决了现有调色板生成器的缺点。它拥有美观的用户界面，并可实时查看颜色组合。此外，它还包含色彩理论部分，帮助设计师理解色彩匹配的原理。

它还提供了一组键盘/鼠标快捷键，使该过程尽可能无缝和简单。