使用 HSL 颜色定义时线性渐变问题

Question

我的目标是 Chrome 的最新版本，我想即使没有供应商前缀，线性渐变也是 compatible。

我注意到在渐变定义前缀中使用 HSL 颜色时必须添加，否则它根本不会渲染。

我想知道：

这是一种特殊情况，因此供应商前缀是强制性的还是浏览器错误？

#test {
  width: 250px;
  height: 250px;
  /*works */
  background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
  /* does no work
  background: linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
*/
}

<div id="test"></div>

Answer 1

这不是错误，您只是在使用 outdated gradient syntax with the standard property. The old one didn't have the to keyword and which was later added. The MDN 页面有一些关于此更改的历史记录。

引用 W3C Spec：（注意我强调的关键字）

The linear gradient syntax is:

<linear-gradient> = linear-gradient( [ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+ )

<side-or-corner> = [left | right] || [top | bottom]

旧语法通过指定渐变的原点起作用，而新语法通过指定起作用目标点，所以像top这样的值应该用to bottom代替，left用to right代替，top left 和 to bottom right 等等

进行上述更改的以下代码片段适用于 Chrome v43，因此在最新的 Chrome 中也适用于您。

#test {
  width: 250px;
  height: 250px;
  background: linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), linear-gradient(to right, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
}

<div id="test"></div>

使用 HSL 颜色定义时线性渐变问题

Issue with linear-gradient on when using HSL color definition

html

css

linear-gradients