CSS漸變的改進(jìn)：雙位置語法簡化漸變條紋

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

支持雙位置語法（同一顏色停止點使用兩個位置，作為具有相同顏色的兩個連續(xù)顏色停止點的快捷方式）

令人驚訝的是，我最近發(fā)現(xiàn)大多數(shù)人甚至不知道漸變停止點的雙位置語法實際上存在於規(guī)範(fàn)中，因此我決定寫一篇關(guān)於它的文章。

根據(jù)規(guī)範(fàn)：

指定兩個位置可以更容易地在漸變中創(chuàng)建純色“條紋”，而無需重複顏色兩次。

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

假設(shè)我們想要獲得以下結(jié)果：一個具有許多等寬垂直條紋的漸變（我從Chris 之前的文章中獲得的）：

十六進(jìn)制值為：#5461c8、#c724b1、#e4002b、#ff6900、#f6be00、#97d700、#00ab84 和#00a3e0。

讓我們首先看看如何在不使用雙停止點位置的情況下使用CSS 實現(xiàn)這一點！

我們有八條條紋，每條條紋佔漸變寬度的八分之一。 100% 的八分之一是12.5%，因此我們在該值的倍數(shù)處從一個條紋過渡到下一個條紋。

這意味著我們的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>

請注意，我們不需要重複停止位置的百分比值，因為每當(dāng)停止位置小於前一個位置時，我們就會自動進(jìn)行急劇過渡。這就是為什麼始終可以使用0（它總是小於任何正值）並使用#c724b1 25%、#e4002b 0 而不是#c724b1 25%、#e4002b 25% 的原因，例如。如果我們決定要添加兩條條紋並將停止位置設(shè)為10% 的倍數(shù)，這在將來可以使我們的生活更輕鬆。

還不錯，尤其是與漸變生成器通常生成的代碼相比。但是，如果我們決定中間的其中一條條紋與其他條紋不太匹配，那麼將其更改為其他內(nèi)容意味著需要在兩個地方進(jìn)行更新。

同樣，這也不是什麼大問題，我們無需借助預(yù)處理器就可以解決：

 <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 漸變，現(xiàn)在我們不必再在兩個地方進(jìn)行修改了。

CodePen 演示

但是，即使預(yù)處理器可以避免我們兩次鍵入相同的內(nèi)容，它也不會消除生成的代碼中的重複。

而且我們可能並不總是想使用預(yù)處理器。撇開有些人頑固或?qū)︻A(yù)處理器具有非理性恐懼或仇恨的事實不談，有時使用循環(huán)感覺有點傻。

例如，當(dāng)我們幾乎沒有任何東西需要循環(huán)時！假設(shè)我們想要獲得更簡單的背景圖案，例如對角線散列圖案，我認(rèn)為這比過於誇張的彩虹圖案更常見，彩虹圖案可能根本不適合大多數(shù)網(wǎng)站。

這需要使用repeating-linear-gradient()，這意味著即使我們沒有像之前那樣擁有很長的十六進(jìn)制值列表，也需要一些重複：

 <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>

在這裡，我們不能丟棄第一個和最後一個停止點，因為這些正是指示漸變?nèi)绾卧赽ackground-size 定義的矩形內(nèi)重複的內(nèi)容。

如果您想了解為什麼最好使用repeating-linear-gradient() 而不是普通的linear-gradient() 結(jié)合適當(dāng)?shù)腷ackground-size 來創(chuàng)建此類散列，請查看我之前寫過的另一篇文章。

這正是此功能發(fā)揮作用的地方——它允許我們避免最終CSS 代碼中的重複。

對於彩虹條紋案例，我們的CSS 變?yōu)椋?/p>

 <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>

要重新創(chuàng)建散列，我們只需要：

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

CodePen 演示

支持情況如何？很好，您問對了！它實際上非常好！它適用於Safari、Chromium 瀏覽器（現(xiàn)在也包括Edge?。┖虵irefox。預(yù)Chromium Edge 和一些移動瀏覽器仍然可能阻礙您，但如果您不必?fù)?dān)心為所有瀏覽器提供支持，或者提供後備方案是可以的，那麼您可以開始使用它！

以上是當(dāng)您看上去時，CSS梯度變得更好的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！