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

Question

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

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

我知道我显然可以删除“线性”参数，但之后我有点迷路了:

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。