0 因为饱和度和亮度不起作用但 0% 在 hsl/hsla 中起作用？

0 as saturation and lightness doesn't work but 0% does in hsl/hsla?

我正在尝试一个简单的演示，我在 hsl 中为元素赋予了颜色。根据我的所有经验，我知道 CSS 中的 0(ZERO) 是无量纲的。如果你想指定0作为一个值，你可以保留单位。

然而，hsl/hsla 似乎并非如此。在 Chrome 和 Firefox 上，它会导致 无效 属性 值 .

这是一个与切线相关的问题，但其中包含零应该是无单位的答案，指的是规范。

Any bug with hsla(0, 0%, 0%, 0), becoming hsla(0, 0, 0, 0)? (missing percent sign)

hsl(0,0,0)     // error
hsl(0,0%,0)    // error
hsl(0,0,0%)    // error

它是否专门设计用于零附近的单位？是否有任何其他类似的属性必须在零旁边有一个单位？

一般来说hsl是定义颜色的概念，有别于CSS；

您可以设置的三个参数是Hue S饱和度L亮度:

  • Hue 想想色轮。设置一个值就像设置一个角度。
    作为 HSL-CSS-value 它是一个无单位的值；支持正负（即 360 == -720）。

  • 饱和度 - 0% 完全变性（灰度）。 100% 是完全饱和的（全色）。
    作为 HSL-CSS-value，需要一个百分比值（您可以指定任何百分比值，但它的范围是 0% 到 100%）。

  • 亮度 - 0% 是完全暗（黑色）。 100% 是完全浅色（白色）。 50% 是平均亮度。
    作为 HSL-CSS-值，您具有与饱和度相同的规则。

  • 可选的 alpha 值是 0 到 1 的值，它定义了颜色的不透明度。

这里有一个 link 好的 article 以获取更多信息。

编辑：

您假设 color property 可以设置为 length-% 单位值是错误的 - 就像其他 CSS 属性一样只接受特定范围的值 color 属性 有它自己的选项（ hsl 是一个）；当解析器达到 hsl 或 hsla 值时，规则就是上面的规则（可能在将来解析器会为您修复它，但现在这是它的工作方式；）

A 0 in CSS 是无单位的，不是任何 0，否则不可能消除歧义（例如，在简写中）。这是，不是。

规格：