Question 1

此工具支持哪些CSS渐变类型？

Accepted Answer

此工具支持所有三种标准CSS渐变类型: linear-gradient（沿直线的颜色过渡）、radial-gradient（以椭圆或圆形从中心点辐射的颜色过渡）和conic-gradient（围绕中心点的颜色过渡，如饼图）。重复变体通过提取核心渐变来解析。

Question 2

什么是CSS颜色停止点，它们如何工作？

Accepted Answer

颜色停止点定义渐变中颜色及其位置。每个停止点有一个颜色值和可选位置（百分比或长度）。如果省略位置，浏览器会均匀分配颜色。linear-gradient(to right, red 0%, red 30%, blue 30%, blue 100%)在30%处创建清晰过渡。

Question 3

如何在CSS中指定渐变方向？

Accepted Answer

对于线性渐变：使用关键词方向（to right、to bottom）、角度（45deg、135deg）或圈值（0.25turn）。对于径向渐变：指定形状（circle或ellipse）、尺寸和位置。对于锥形渐变：使用'from Ndeg'设置起始角度。

Question 4

如何创建硬颜色停止（无混合）的渐变？

Accepted Answer

要创建硬停止，在相同位置放置两个颜色停止点: linear-gradient(to right, #ff0000 50%, #0000ff 50%)。这创建一个清晰的边缘，没有渐变混合。

Question 5

如何在背景、边框和文本中使用CSS渐变？

Accepted Answer

渐变在CSS中是值，而非值。用于背景: background: linear-gradient(...)。渐变文字: background: linear-gradient(...); -webkit-background-clip: text; color: transparent。

CSS渐变分析器

常见问题