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

Question

我的目标是最新版本的Chrome,我认为即使没有供应商前缀,线性渐变也是兼容的.

我注意到在渐变定义中使用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

这不是一个错误,您只是使用过时的渐变语法与标准属性.旧的没有to关键字,后来又添加了.该MDN页面有关于这种变化的一些历史.

引用W3C规范 :(注意我强调的关键字)

线性渐变语法是:

<linear-gradient> =线性渐变([[<angle> | to <side-or-corner>],]？<color-stop> [,<color-stop>] +)

<side-or-corner> = [left | 对] || [顶部| 底部]

旧语法通过指定渐变的原点来工作,而新语法通过指定目标点来工作,因此类似的值top应替换为to bottom,leftwith to right,top leftwith 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>