Question

我定位的是Chrome的最新版本，我认为即使没有供应商前缀，线性渐变也是compatible。

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

我想知道：

这是一个特例，所以供应商前缀是强制性的还是浏览器错误？

＆＃13;

#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%);
*/
}

＆＃13;

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

＆＃13;

Answer 1

这不是错误，您只是将outdated gradient syntax与标准属性一起使用。旧版本没有to关键字，后来添加了该关键字。 MDN页面包含有关此更改的一些历史记录。

引用W3C Spec :(注意我强调的关键字）

线性渐变语法为：

＆LT;线性梯度＆GT; =线性梯度（       [[＆lt; angle＆gt; | 到＆lt; side-or-corner＆gt; ]，]？       ＆lt; color-stop＆gt; [，＆lt; color-stop＆gt;] +   ）

＆LT;并排或角＆GT; = [左|对] || [顶部|底部]

旧语法通过指定渐变的原点来工作，而新语法通过指定 目标点 <来工作/ strong>，因此top之类的值应替换为to bottom，left替换为to right，top left替换为to bottom right等。

上面提到的更改的以下代码段适用于我在Chrome v43中，因此也适用于最新的Chrome。

＆＃13;
＆＃13;
#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%); }
＆＃13;
<div id="test"></div>
＆＃13;
＆＃13;
＆＃13;

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

1 个答案: