當您看上去時，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中文網其他相關文章！