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

Question

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

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

我知道我显然可以删除 'linear' 参数，但之后我有点迷路了：

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.

converting gradient to linear-gradient syntax