CSS 属性生成器

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

可生成的内容

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

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

如何计算 CSS 线性渐变

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

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

角度以度为单位测量，范围从 0 到 360。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 中广泛使用的 # 形式。以下四种长度有效：三位数字 （#f00）、四位数字（#f00c）、六位数字（#ff0000）和八位数字 （#ff0000cc）。短格式与长格式表示相同的颜色，因为 每个数字都会重复一次：#123 与 #112233 表示相同的颜色。

四位格式的最后一位和八位格式的最后一对数字 用于设置透明度。阴影生成器会忽略这些数字，而是从“不透明度”滑块获取 alpha 值，因此滑块始终显示实际应用的 透明度。如果文本框中的内容 不是十六进制颜色，例如代码尚未输入完整，阴影会回退为黑色 ，而不是生成无效声明。

如何使用 CSS 属性生成器

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

常见问题

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

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

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

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

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

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

参考文献

1. MDN Web Docs：使用 CSS 渐变
2. MDN Web Docs：box-shadow
3. MDN Web Docs：border-radius
4. MDN Web Docs：text-shadow