在本文中，我們將透過使用單一 HTML 元素為每個標誌建立不同的標誌來回顧 CSS 漸層。作為體驗的一部分，我們還將檢查 ::before 和 ::after 偽元素以及 Clip-path 屬性。
我們將編寫簡單的標誌並避免編寫徽章，因為它們在 CSS 中會很困難。這並非不可能，但這也不值得做。為此使用 SVG。
我使用不同標誌的維基百科頁面來取得尺寸、大小、位置和顏色。如果其中有任何錯誤，我提前表示歉意。
讓我們先加入標誌的 HTML 程式碼以及一些常見的樣式：
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
以下是他們所做工作的簡短說明：
其中一些是過度設計的——是的，你可以過度設計 CSS——因為大多數標誌不需要它們。尤其是我們將在本文中編寫的程式碼…但最終您會發現一些需要這些屬性的程式碼，為什麼不直接將它們放在類別中，而不是多次單獨添加它們？
線性漸進建立在單一方向上漸進的顏色過渡（沿著一條線，因此得名）。 預設情況下，方向是從上到下垂直，這使得創建標誌變得簡單。
讓我們從波蘭國旗開始。它有兩種佔據相同高度的顏色：頂部是白色，底部是紅色。這是您會發現的最簡單的漸變之一。
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
此漸層將白色設定為從頂部開始的顏色，直到達到 50%（標誌的一半），然後變為紅色，也從 50% 開始。
我們也加入了縱橫比：8 / 5；因為這是波蘭國旗的官方比例 (5:8)。請隨意忽略以下範例中的該屬性，但請記住要添加它，否則標誌將沒有寬度並且將不可見！
CSS 漸層不限於兩種顏色，可以有任意數量的顏色 - 但請注意，如果顏色太多，某些瀏覽器可能無法正確顯示漸層。
德國國旗就是一個例子，我們從上到下有三種顏色：
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
我們刻意將這個範例的符號設定為多行且特別冗長。請注意我們如何在該值後面新增兩個值。它們分別是每種顏色的起點和終點。在上面的範例中，黑色將從頂部(0%) 開始，到達旗幟的三分之一(33.33%)，紅色將從頂部(33.33%) 開始，到達旗幟的三分之二(66.66%) ） ，最後，黃色將在66.66% 之後直接開始，一直到旗子底部（100%）。在標誌的情況下，結束值和隨後的起始值將匹配，但如果不匹配，瀏覽器將逐漸過渡顏色。
考慮到第一個顏色預設從 0 開始，最後一個顏色預設以 100% 結束，我們可以從線性漸變中消除這些值。此外，任何低於前一個結束值的起始值都會導致顏色之間出現急劇停止。我們希望我們的標誌也是如此，並且不想輸入太多，所以我們可以為起始值設定最低的值：0% 或只是 0。這樣，上面的 CSS 將被簡化為產生的結果類似的結果，但要短得多：
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
如果我們只能產生垂直線性漸變，那就太無聊了，而且沒用。有多種方法可以改變漸層繪製的方向。讓我們檢查其中幾個：
我們以比利時國旗為例。顏色不是垂直堆疊而是水平堆疊：從左到右分別為黑色、黃色和紅色。我們至少可以透過兩種不同的方式來實現這一目標：
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
徑向漸進建立從一個原點到所有方向的漸進顏色過渡，產生看起來像顏色橢圓的徑向效果（如果邊相等，則為圓形）。 預設情況下，該點是元素的絕對中心 –水平和垂直。
需要考慮的一些重要事項：
記住這些初步想法（和關鍵字），讓我們創建一些標誌！
日本國旗是白旗中央的一個大紅圓圈。這是我們能找到的最簡單的徑向漸層之一，我們將使用先前回顧過的circle關鍵字，因為標誌是矩形的，如果我們不使用它，我們將得到一個橢圓形。
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
我們將最接近邊尺寸關鍵字與圓形關鍵字結合起來，產生高度為 60% 的圓形（因為頂部和底部邊比左側和右側更近）。
如果我們只能從元素的中心創建圓形和橢圓形，我們可以使用 CSS 複製一些標誌（例如寮國或蒲隆地）。儘管如此，我們還是無法發展其他偏離中心的圈子（例如哥斯大黎加或衣索比亞）。
radial-gradient() 方法允許我們指示漸變的原點。我們透過在 size 和 shape 關鍵字（如果有）之後使用 at posX posY 來實現。讓我們試著用它來創造孟加拉的國旗：
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
當我們開始移動漸層的中心時會發生什麼事？到最遠角的距離發生了變化！這將導致三角計算來相應地調整大小……或者相反，我們可以識別不是最遠角的不同參考點（如本例中的最近側）。
為了避免這種情況，我們可以指定寬度和高度的絕對大小。如果我們這樣做，我們將無法識別它是圓形還是橢圓形，因為這些絕對值將決定形狀。
圓錐漸進創建從一個原點繞其順時針旋轉的漸進顏色過渡。這樣的視覺化聽起來可能很複雜，所以當我向人們解釋它時，我更喜歡使用一個例子：想像一個規則的線性漸變打印在紙上（到目前為止，還不錯）；現在你拿起紙張，折疊一側並將其捲成圓錐形（因此得名！）所得的圖形從上方看起來像圓錐漸變。我希望這對您有幫助。
與徑向漸變一樣，圓錐曲線漸變的預設原點是元素的絕對中心。同樣作為徑向漸變，我們可以透過使用 at posX posY 來更改該點。
這是一個使用圓錐漸層創建的相當簡單的標誌。首先，我們需要將中心定位在水平 40%、垂直 50% 的位置，然後指定停止點。
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
正如我所說，小菜一碟！由於內容不多，關於貝南國旗，有一個你可能不知道的事實：黃色代表國家的瑰寶，紅色代表祖先的勇氣，綠色代表民主的希望。
在此基礎上，我們來看看捷克國旗的繪製方法：
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
這工作得很好，但請注意我們如何使用 #fff 兩次。如果我們只能使用它一次不是很好嗎？正如您可能已經猜到的，答案是我們可以！梯度漸變不一定需要從 0 度開始。我們可以使用 from [angle] 來指定起始位置。
例如，假設我們要從紅色開始：
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
角度可以是正值或負值，那麼我們將分別順時針或逆時針移動起點。
我們已經學習瞭如何使用線性、徑向和圓錐漸變來產生相對簡單的標誌…但有時標誌可能會變得複雜，單一漸變是行不通的。這種情況我們能做什麼？
CSS 允許在一個元素中使用多個背景影像（和漸變）。我們需要用逗號分隔它們的值。因為這可能違反直覺，但要記住的一件重要事情是頂部背景將重疊並隱藏底部背景。
瑞典國旗是藍色背景上的黃色十字。我們可以使用線性漸變透明-黃色-透明來產生每個黃色條：
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
這個例子的內容遠不止表面上看起來的那樣：
雖然先前的標誌顯示了多個漸變效果，但由於使用了透明度，因此無法很好地展示它們如何堆疊。那麼，讓我們來看另一個例子 – 使用不同類型的多個漸變。
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
組合背景時，您不僅限於一種漸變類型。您可以使用任何類型。
到目前為止，我們已經了解了線性、徑向和圓錐漸變，以及如何組合它們。但在所有情況下，梯度佔據了整個標誌。有些透明膠片可能不會讓它看起來那樣，但漸變的大小始終是寬度和高度的 100%。
但是有一些方法可以改變漸變的大小以更好地滿足我們的需求。最簡單的一種是指定背景大小。如果尺寸小於容器，背景將重複（除非我們使用諸如background-repeat: none之類的東西。）
讓我們回顧一下帶有卡達國旗的範例。該標誌重複一個圖案九次，並且可以使用圓錐梯度輕鬆複製。如果我們指定漸變的寬度為flag的100%，高度為flag高度的九分之一，瀏覽器就會重複背景，直到容器被填滿，為我們完成繪圖。
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
當然，一旦我們指定了尺寸，我們也可以指定漸變所在的位置。我們將使用背景位置來做到這一點（這就是背景重複屬性會派上用場的地方）。
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
請注意，我們不需要指定最後一種顏色的大小和位置。只能設定一個，會自動佔據整個容器。
我們可以用逗號分隔背景圖像、大小和位置的數值。當只有幾個背景時，這很方便，但如果我們有多個背景，那就很麻煩了。很容易迷失方向並混淆價值觀。
相反，我們可以使用background屬性的縮寫形式一次提供所有值：background：漸變位置/大小重複，如下所示：
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
我們已經看到了線性、徑向和圓錐漸變，但每種變化都允許我們添加「顏色圖案」。旗幟非常適合此目的：許多旗幟由重複的水平線組成。
我說的是重複漸層。它們的行為與常規漸變相同，它們重複指定的圖案，直到達到 100% 或 360 度。共有三個重複漸層：
我們以希臘國旗為例。我們可以使用 3 或 4 個大的線性漸變來實現它，或者我們可以使用三個重複的線性漸變：
為了實現左上角的十字，我們必須定義前兩個線性漸變的位置和大小。
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(#000 33.33%, #f00 0 66.66%, #fc0 0);
}
烏幹達的國旗上有一隻美麗的灰冠鶴，出於實際原因，我們不會在 CSS 中對其進行編碼。我們將重點放在另外兩個標誌部分：中心的白色圓圈和幾條黑色、黃色和紅色的水平線。
這個組合可以透過兩種不同的方式來實現：
第一個選項是這樣的：
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
第二個選項如下：
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
但這兩個選項最終看起來都是一樣的。重要的是要記住，在 CSS 中，就像在任何其他程式設計風格中一樣，通常有不只一種方法可以實現我們的目標。
術語「單元素標誌」可能會產生誤導。所有非空 HTML 元素至少包括兩個我們可以用來繪製的偽元素：::before 和 ::after。因此，我們確實擁有三個可以單獨設計樣式並提供多種可能性的元素：
如果您如上所述使用漸層對卡達國旗進行編碼，您可能會注意到漸層的三角形邊緣在某些顯示器上看起來過於鋒利且醜陋。有很多方法可以解決這個問題，但我喜歡的解決方案是使用帶有剪輯路徑的偽元素來使線條更平滑、更清晰。
與使用多個線性漸變和下一節中解釋的像素差異技巧相比，此選項將簡化程式碼。
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
這種情況下的偽元素不必局限於複雜的模式。以古巴、巴哈馬或約旦的國旗為例。它們的左側有一個我們使用圓錐漸層繪製的三角形。這些漸層有一個問題：邊緣在某些顯示器上看起來太硬或像素化——下一節中有一個使用線性漸層解決這個問題的技巧——。相反，我們可以使用偽元素（三點多邊形路徑）來建立三角形，並且邊緣看起來會更平滑。類似上面的巴林國旗。
我獲得了五點星形頂點的近似點，並在 ::before 和 ::after 偽元素中使用 Clip-path 應用它們。許多CSS藝術家會考慮使用剪輯路徑作弊，並且可以使用圓錐漸變來繪製星形。但為了簡單起見，我將其保留為剪輯路徑。
加入圓錐漸層作為國旗背景，以及偽元素中的星星，我們很快就可以畫出巴拿馬國旗：
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
請記住，當您組合背景時，它們將按照列出的順序堆疊。這意味著，第一個將位於頂部並與下面的重疊，然後是。
雖然從設計的角度來看是有意義的，但從 CSS 的角度來看可能是違反直覺的，因為級聯使得屬性或類別的最後一次出現優先於先前定義的屬性或類別。
在文章中，我提到漸層邊緣可能看起來太銳利或像素化。發生這種情況是因為瀏覽器渲染漸變的方式 - 這很煩人，特別是因為 SVG 上的硬停止邊緣不會發生這種情況。
例如，這裡的線條在所有顯示器上看起來可能不太好：
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
避免這種情況的一個技巧是在端點和下一個起點之間添加像素差異。可以分別從其中每個減去或添加 0.5px，或更簡單，只需從其中一個減去/添加 1px。這條線在所有顯示器上看起來都很平滑：
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
使用重複漸變時的一個常見錯誤是沒有為第一種顏色添加起點。這將導致漸變看起來很時髦。如果您的重複漸變沒有如預期般運作，請務必驗證您是否在其中新增了 0（或任何值）！
偽元素一開始可能會令人生畏，但它們與任何其他元素沒有什麼不同，它們只是附加到 HTML 元素上。
不要忘記為 content 屬性新增一個值（當您只想讓它出現時，空字串很常見）。否則，偽元素將不可見！
在CSS中繪圖和創建CSS Art時，很多人會聲稱使用clip-path屬性是作弊。它使事情變得更容易，並且是您腰帶上的有用工具。我不會因為它是「作弊」就丟棄它。
學習如何使用剪輯路徑 - 和蒙版！ - 它最終會在專案中派上用場。
現在是時候練習 CSS 漸層了。請嘗試一下並嘗試自己重新創建一些標誌。以下是具有良好旗幟可供練習的國家/地區清單（按複雜程度排序）：
請記住：沒有唯一的標誌編碼方式。其中每一個都可以透過多種不同的方式來完成。使用您更熟悉或知道看起來最好的漸變。
以上是Alvaro Montoro 展示：使用 CSS 享受旗幟樂趣的詳細內容。更多資訊請關注PHP中文網其他相關文章！
