CSS 属性生成器

CSS 属性生成器是一种工具，可通过一组滑块和颜色选择器生成视觉效果所需的 CSS 代码，而不必让用户手动输入代码。此生成器涵盖四种效果：渐变、盒阴影、边框圆角和文字阴影。每个面板都会显示实时预览，并生成可直接复制的 CSS。

可生成的内容

• 渐变：两种颜色之间的线性或径向颜色过渡
• 盒阴影：元素周围的投影或内阴影，可控制偏移、模糊、扩展、颜色和不透明度
• 边框圆角：圆角可以在四个角使用相同值，也可以分别设置
• 文字阴影：文字后方的阴影，可控制偏移、模糊、颜色和不透明度

每项设置都会同时更新预览和生成的 CSS，因此可以在复制代码前检查更改效果。

如何计算 CSS 线性渐变

线性渐变沿直线从一种颜色过渡到另一种颜色。其 CSS 语法为：

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

角度以度为单位，范围从0到360。在 CSS 中，0deg表示从下到上，90deg表示从左到右。position1和position2设定每种颜色达到最大强度的位置，以渐变长度的百分比表示。

示例

生成器的起始值为 90 度角，#ff5f6d 位于 0%，以及 #ffc371 位于 100%。生成的结果为：

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

第一行是纯色备用值，供因某些原因无法渲染渐变的浏览器使用。第二行才是渐变本身。

径向渐变公式

径向渐变从中心点向外扩散，而不是沿一条直线变化。其形状可以是圆形或椭圆形：

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

此生成器始终生成圆形径向渐变。不提供椭圆形状选项，也不能移动中心点；只能更改两种颜色及其色标位置。

此工具中的两种渐变都严格使用两种颜色，通过颜色 1 和颜色 2 选择器设置。不提供添加第三个色标的选项。

CSS 盒阴影公式

盒阴影是绘制在元素边缘周围的阴影：

1box-shadow: h-offset v-offset blur spread color;
2

h-offset和v-offset使阴影左右和上下移动。正值使阴影向右或向下移动；负值使阴影向左或向上移动。blur使阴影边缘变柔和，数值越大，柔和范围越广。spread在应用模糊之前放大或缩小阴影的尺寸。在偏移值之前加上关键字inset，阴影会绘制在元素边框的内侧，而不是外侧。

示例

使用默认设置（水平偏移 5px、垂直偏移 5px、模糊 10px、扩展 0px，黑色，不透明度为 20%）时，工具输出：

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

颜色选择器的不透明度滑块范围为 0 到 100，并会转换为 0 到 1 的刻度供 rgba() 使用，因此 20% 会变为 0.2。

CSS 边框圆角公式

边框圆角用于将元素的角变为圆角。共有两种形式：

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

勾选“所有角使用相同半径”时，生成器会写出简写形式。取消勾选时，生成器总会列出四个值，即使它们相等，顺序为左上、右上、右下、左下。

示例

默认情况下，每个角的圆角半径均为 10px：

1border-radius: 10px;
2

圆形头像图像通常改用 border-radius: 50%，但该值超出了此生成器滑块允许的范围（0 到 100 像素）。

CSS 文字阴影公式

文字阴影的作用与盒阴影类似，但作用于字母，而不是元素的盒子。它接受两个偏移值和一个可选的模糊值，没有扩展值：

1text-shadow: h-offset v-offset blur color;
2

示例

使用默认设置（水平偏移 2px、垂直偏移 2px、模糊 3px，黑色，不透明度为 50%）时：

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

如何使用 CSS 属性生成器

1. 选择一个选项卡：渐变、盒阴影、边框圆角或文字阴影。
2. 调整滑块、取色器和复选框。预览面板和 CSS 代码都会立即更新。
3. 选择“复制到剪贴板”按钮，然后将代码粘贴到样式表或 style 属性中。
4. 选择“重置”，可将四个选项卡中的所有字段恢复为起始值。即使当前查看的是其他选项卡，这也会将活动选项卡切回“渐变”。

常见问题

CSS 属性生成器有什么用途？ 它会将滑块和颜色选择器的输入转换为用于渐变、阴影和圆角的完整 CSS 代码，使使用者不必手动编写或记忆这些语法。

线性渐变和径向渐变有什么区别？ 线性渐变以设定的角度沿直线改变颜色。径向渐变从中心点向外改变颜色。此工具的径向选项始终使用圆形。

此工具能否创建包含两种以上颜色的渐变？ 不能。线性渐变和径向渐变面板都严格支持两种颜色，即颜色 1 和颜色 2，每种颜色都有各自的色标位置。

内阴影与普通盒阴影有何不同？ 普通盒阴影位于元素边缘外部，就像光线落在元素后方。内阴影则位于边缘内部，使元素看起来像是向内凹陷，而不是向外凸起。

为什么圆角值的顺序是左上、右上、右下、左下？ 这是 CSS border-radius 属性写入四个独立值时所要求的顺序，从左上角开始按顺时针方向排列。

生成的 CSS 能在所有浏览器中运行吗？ 当前版本的 Chrome、Firefox、Safari 和 Edge 都支持渐变、盒阴影、边框圆角和文字阴影。输出中不会添加厂商前缀。

参考文献

1. Mozilla 开发者网络（Mozilla Developer Network）。linear-gradient()。linear-gradient() 参考 — to top和to right分别等同于0deg和90deg。
2. Mozilla 开发者网络（Mozilla Developer Network）。radial-gradient()。radial-gradient() 参考 — 径向渐变的形状可以是圆形或椭圆形。
3. Mozilla 开发者网络（Mozilla Developer Network）。box-shadow。box-shadow 参考 — 偏移方向、扩展值和inset关键字。
4. Mozilla 开发者网络（Mozilla Developer Network）。border-radius。border-radius 参考 — 四值写法的顺序为左上、右上、右下、左下。
5. Mozilla 开发者网络（Mozilla Developer Network）。text-shadow。text-shadow 参考 — 每个文字阴影由两个或三个长度值（偏移值和模糊值）加一个可选的颜色组成。