将渐变转换为线性渐变语法

Question

我试图从渐变线性渐变转换CSS样式，但对语法有点困惑：

background: gradient(linear, left top, right top, from(#BF942F), to(#BF942F), color-stop(0.5, #F8F8DC));

我知道我显然可以删除线性＆＃39;参数但我之后有点失落：

background: linear-gradient(left top, right top, from(#BF942F), to(#BF942F), color-stop(0.5, #F8F8DC));

任何人都可以提供一些见解吗？

Answer 1

• left top, right top应映射到单个方向参数：to right。 top位无关紧要，因为这是一个水平线性渐变。

• 未使用from，to和color-stop功能表示法;而是按顺序指定颜色停止。根据您所拥有的内容，它看起来应该是#BF942F, #F8F8DC, #BF942F。由于每个颜色停止是等距的（0％，50％，100％），因此无需指定每个颜色的精确位置。

因此：

background: linear-gradient(to right, #BF942F, #F8F8DC, #BF942F);

Here's a comparison of the old and new syntaxes.请注意，由于您拥有的符号是WebKit发明，因此仅以-webkit-gradient()存在，因此只能在基于WebKit的浏览器中看到作为Safari或Chrome。