html - 使用 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与标准属性。旧的没有 to 关键字，这是后来添加的。 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]

旧语法通过指定渐变的起点起作用，而新语法通过指定终点起作用/strong>，因此像 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>