当您看上去时，CSS梯度变得更好

CSS渐变的改进：双位置语法简化渐变条纹

Lea Verou 的 conic-gradient() polyfill 功能列表中有一项引起了我的注意：

支持双位置语法（同一颜色停止点使用两个位置，作为具有相同颜色的两个连续颜色停止点的快捷方式）

令人惊讶的是，我最近发现大多数人甚至不知道渐变停止点的双位置语法实际上存在于规范中，因此我决定写一篇关于它的文章。

根据规范：

指定两个位置可以更容易地在渐变中创建纯色“条纹”，而无需重复颜色两次。

我完全同意，这是我了解此功能时首先想到的。

假设我们想要获得以下结果：一个具有许多等宽垂直条纹的渐变（我从 Chris 之前的文章中获得的）：

十六进制值为：#5461c8、#c724b1、#e4002b、#ff6900、#f6be00、#97d700、#00ab84 和 #00a3e0。

让我们首先看看如何在不使用双停止点位置的情况下使用 CSS 实现这一点！

我们有八条条纹，每条条纹占渐变宽度的八分之一。100% 的八分之一是 12.5%，因此我们在该值的倍数处从一个条纹过渡到下一个条纹。

这意味着我们的 linear-gradient() 如下所示：

<code>linear-gradient(90deg, 
             #5461c8 12.5% /* 1*12.5% */, 
  #c724b1 0, #c724b1 25%   /* 2*12.5% */, 
  #e4002b 0, #e4002b 37.5% /* 3*12.5% */, 
  #ff6900 0, #ff6900 50%   /* 4*12.5% */, 
  #f6be00 0, #f6be00 62.5% /* 5*12.5% */, 
  #97d700 0, #97d700 75%   /* 6*12.5% */, 
  #00ab84 0, #00ab84 87.5% /* 7*12.5% */, 
  #00a3e0 0)</code>

请注意，我们不需要重复停止位置的百分比值，因为每当停止位置小于前一个位置时，我们就会自动进行急剧过渡。这就是为什么始终可以使用 0（它总是小于任何正值）并使用 #c724b1 25%、#e4002b 0 而不是 #c724b1 25%、#e4002b 25% 的原因，例如。如果我们决定要添加两条条纹并将停止位置设为 10% 的倍数，这在将来可以使我们的生活更轻松。

还不错，尤其是与渐变生成器通常生成的代码相比。但是，如果我们决定中间的其中一条条纹与其他条纹不太匹配，那么将其更改为其他内容意味着需要在两个地方进行更新。

同样，这也不是什么大问题，我们无需借助预处理器就可以解决：

<code>$c: #5461c8 #c724b1 #e4002b #ff6900 #f6be00 #97d700 #00ab84 #00a3e0;

@function get-stops($c-list) {
  $s-list: ();
  $n: length($c-list);
  $u: 100%/$n;

  @for $i from 1 to $n {
    $s-list: $s-list, 
             nth($c-list, $i) $i*$u, 
             nth($c-list, $i   1) 0
  }

  @return $s-list
}

.strip {
  background: linear-gradient(90deg, get-stops($c)))
}</code>

这将生成我们稍早前看到的精确 CSS 渐变，现在我们不必再在两个地方进行修改了。

CodePen 演示

但是，即使预处理器可以避免我们两次键入相同的内容，它也不会消除生成的代码中的重复。

而且我们可能并不总是想使用预处理器。撇开有些人顽固或对预处理器具有非理性恐惧或仇恨的事实不谈，有时使用循环感觉有点傻。

例如，当我们几乎没有任何东西需要循环时！假设我们想要获得更简单的背景图案，例如对角线散列图案，我认为这比过于夸张的彩虹图案更常见，彩虹图案可能根本不适合大多数网站。

这需要使用 repeating-linear-gradient()，这意味着即使我们没有像之前那样拥有很长的十六进制值列表，也需要一些重复：

<code>repeating-linear-gradient(-45deg, 
    #ccc /* can't skip this, repeating gradient won't work */, 
    #ccc 2px, 
    transparent 0, 
    transparent 9px /* can't skip this either, tells where gradient repetition starts */)</code>

在这里，我们不能丢弃第一个和最后一个停止点，因为这些正是指示渐变如何在 background-size 定义的矩形内重复的内容。

如果您想了解为什么最好使用 repeating-linear-gradient() 而不是普通的 linear-gradient() 结合适当的 background-size 来创建此类散列，请查看我之前写过的另一篇文章。

这正是此功能发挥作用的地方——它允许我们避免最终 CSS 代码中的重复。

对于彩虹条纹案例，我们的 CSS 变为：

<code>linear-gradient(90deg, 
    #5461c8 12.5%, 
    #c724b1 0 25%, 
    #e4002b 0 37.5%, 
    #ff6900 0 50%, 
    #f6be00 0 62.5%, 
    #97d700 0 75%, 
    #00ab84 0 87.5%, 
    #00a3e0 0)</code>

要重新创建散列，我们只需要：

<code>repeating-linear-gradient(-45deg, 
    #ccc 0 2px, 
    transparent 0 9px)</code>

CodePen 演示

支持情况如何？很好，您问对了！它实际上非常好！它适用于 Safari、Chromium 浏览器（现在也包括 Edge！）和 Firefox。预 Chromium Edge 和一些移动浏览器仍然可能阻碍您，但如果您不必担心为所有浏览器提供支持，或者提供后备方案是可以的，那么您可以开始使用它！

以上是当您看上去时，CSS梯度变得更好的详细内容。更多信息请关注PHP中文网其他相关文章！