在本文中，我們將通過使用單個 HTML 元素為每個標(biāo)志創(chuàng)建不同的標(biāo)志來回顧 CSS 漸變。作為體驗的一部分，我們還將檢查 ::before 和 ::after 偽元素以及 Clip-path 屬性。

我們將編寫簡單的標(biāo)志并避免編寫徽章，因為它們在 CSS 中會很困難。這并非不可能，但這也不值得做。為此使用 SVG。

我使用不同標(biāo)志的維基百科頁面來獲取尺寸、大小、位置和顏色。如果其中有任何錯誤，我提前表示歉意。

搭建舞臺

讓我們首先添加標(biāo)志的 HTML 代碼以及一些常見的樣式：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

以下是他們所做工作的簡短說明：

• display: inline-grid：這將將元素（幾乎）視為圖像并與文本對齊顯示。使用 inline-flex 或 inline-grid 將提供更強大的對齊可能性。
• height: 1em: 不同的旗幟有不同的尺寸。 通過設(shè)置固定高度，我們可以添加寬高比屬性來生成適當(dāng)?shù)膶挾?，同時保持所有標(biāo)志具有一致的高度。
• 位置：相對：如果我們需要偽元素，它們可能需要絕對位置，并且我們希望使我們的標(biāo)志成為該絕對定位的參考點。
• 溢出：隱藏：如果偽元素由于任何原因溢出容器，我們希望從視圖中隱藏溢出。
• 垂直對齊：頂部：將標(biāo)志與文本對齊將使它們看起來更好，因為它們的對齊方式將“更自然”。

其中一些是過度設(shè)計的——是的，你可以過度設(shè)計 CSS——因為大多數(shù)標(biāo)志不需要它們。尤其是我們將在本文中編寫的代碼……但最終您會發(fā)現(xiàn)一些需要這些屬性的代碼，為什么不直接將它們放在類中，而不是多次單獨添加它們？

---

線性漸變

線性漸變創(chuàng)建在單個方向上漸進的顏色過渡（沿著一條線，因此得名）。 默認(rèn)情況下，方向是從上到下垂直，這使得創(chuàng)建標(biāo)志變得簡單。

波蘭

讓我們從波蘭國旗開始。它有兩種占據(jù)相同高度的顏色：頂部是白色，底部是紅色。這是您會發(fā)現(xiàn)的最簡單的漸變之一。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

此漸變將白色設(shè)置為從頂部開始的顏色，直到達到 50%（標(biāo)志的一半），然后變?yōu)榧t色，也從 50% 開始。

我們還添加了縱橫比：8 / 5；因為這是波蘭國旗的官方比例 (5:8)。請隨意忽略以下示例中的該屬性，但請記住添加它，否則標(biāo)志將沒有寬度并且將不可見！

---

德國

CSS 漸變不限于兩種顏色，可以有任意數(shù)量的顏色 - 但請注意，如果顏色太多，某些瀏覽器可能無法正確顯示漸變。

德國國旗就是一個例子，我們從上到下有三種顏色：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

我們特意將這個示例的符號設(shè)置為多行且特別冗長。請注意我們?nèi)绾卧谠撝岛竺嫣砑觾蓚€值。它們分別是每種顏色的起點和終點。在上面的示例中，黑色將從頂部 (0%) 開始，到達旗幟的三分之一 (33.33%)，紅色將從頂部 (33.33%) 開始，到達旗幟的三分之二 (66.66%) ），最后，黃色將在 66.66% 之后直接開始，一直到旗子底部（100%）。在標(biāo)志的情況下，結(jié)束值和隨后的起始值將匹配，但如果不匹配，瀏覽器將逐漸過渡顏色。

考慮到第一個顏色默認(rèn)從 0 開始，最后一個顏色默認(rèn)以 100% 結(jié)束，我們可以從線性漸變中消除這些值。此外，任何低于前一個結(jié)束值的起始值都會導(dǎo)致顏色之間出現(xiàn)急劇停止。我們希望我們的標(biāo)志也是如此，并且不想輸入太多，所以我們可以為起始值設(shè)置最低的值：0% 或只是 0。這樣，上面的 CSS 將被簡化為產(chǎn)生的結(jié)果類似的結(jié)果，但要短得多：

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

---

比利時

如果我們只能生成垂直線性漸變，那就太無聊了，而且沒用。有多種方法可以更改漸變繪制的方向。讓我們檢查其中幾個：

• 用關(guān)鍵字指定方向：你想要顏色從右到左嗎？用顏色列表前的左側(cè)關(guān)鍵字表示。從下到上？到頂部。從左下角到右上角對角線？使用到右上角。真的就是這么簡單！
• 指定動作角度：可能很棘手，但它比以前的選項提供了更多的可能性。您可以通過指示動作角度來選擇任何方向，而不是僅限于八個。在這種情況下，0deg 為從下到上，90deg 為從左到右，180deg 為從上到下，270deg（或 -90deg）為從右到左。

我們以比利時國旗為例。顏色不是垂直堆疊而是水平堆疊：從左到右分別為黑色、黃色和紅色。我們至少可以通過兩種不同的方式來實現(xiàn)這一目標(biāo)：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

---

徑向漸變

徑向漸變創(chuàng)建從一個原點到所有方向的漸進顏色過渡，生成看起來像顏色橢圓的徑向效果（如果邊相等，則為圓形）。 默認(rèn)情況下，該點是元素的絕對中心 –水平和垂直。

需要考慮的一些重要事項：

• 它生成一個橢圓，而不是圓形。如果容器是矩形的，它看起來就像一個橢圓形。如果容器是方形的，它看起來像圓形。有關(guān)鍵字（circle）來保證生成的形狀是圓形而不是橢圓形。
• 橢圓的大小隨容器及其位置的不同而變化（稍后將詳細(xì)介紹）。 0% 將是原點，100% 將是距該原點最遠(yuǎn)的角。我們可以使用關(guān)鍵字（closest-side、farthest-side、nearest-corner 等）來更改此設(shè)置。

記住這些初步想法（和關(guān)鍵字），讓我們創(chuàng)建一些標(biāo)志！

日本

日本國旗是白旗中央的一個大紅圓圈。這是我們能找到的最簡單的徑向漸變之一，我們將使用之前回顧過的circle關(guān)鍵字，因為標(biāo)志是矩形的，如果我們不使用它，我們將得到一個橢圓形。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

我們將最接近邊尺寸關(guān)鍵字與圓形關(guān)鍵字結(jié)合起來，生成高度為 60% 的圓形（因為頂部和底部邊比左側(cè)和右側(cè)更近）。

---

孟加拉國

如果我們只能從元素的中心創(chuàng)建圓形和橢圓形，我們可以使用 CSS 復(fù)制一些標(biāo)志（例如老撾或布隆迪）。盡管如此，我們還是無法開發(fā)其他偏離中心的圈子（例如哥斯達黎加或埃塞俄比亞）。

radial-gradient() 方法允許我們指示漸變的原點。我們通過在 size 和 shape 關(guān)鍵字（如果有）之后使用 at posX posY 來實現(xiàn)。讓我們嘗試用它創(chuàng)建孟加拉國的國旗：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

當(dāng)我們開始移動漸變的中心時會發(fā)生什么？到最遠(yuǎn)角的距離發(fā)生了變化！這將導(dǎo)致三角計算來相應(yīng)地調(diào)整大小……或者相反，我們可以識別不是最遠(yuǎn)角的不同參考點（如本例中的最近側(cè)）。

為了避免這種情況，我們可以指定寬度和高度的絕對大小。如果我們這樣做，我們將無法識別它是圓形還是橢圓形，因為這些絕對值將決定形狀。

---

圓錐曲線漸變

圓錐漸變創(chuàng)建從一個原點繞其順時針旋轉(zhuǎn)的漸進顏色過渡。這樣的可視化聽起來可能很復(fù)雜，所以當(dāng)我向人們解釋它時，我更喜歡使用一個例子：想象一個規(guī)則的線性漸變打印在紙上（到目前為止，還不錯）；現(xiàn)在你拿起紙張，折疊一側(cè)并將其卷成圓錐形（因此得名！）所得的圖形從上方看起來像圓錐漸變。我希望這對您有幫助。

與徑向漸變一樣，圓錐曲線漸變的默認(rèn)原點是元素的絕對中心。同樣作為徑向漸變，我們可以通過使用 at posX posY 來更改該點。

貝寧

這是一個使用圓錐漸變創(chuàng)建的相當(dāng)簡單的標(biāo)志。首先，我們需要將中心定位在水平 40%、垂直 50% 的位置，然后指定停止點。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

正如我所說，小菜一碟！由于內(nèi)容不多，關(guān)于貝寧國旗，有一個你可能不知道的事實：黃色代表國家的瑰寶，紅色代表祖先的勇氣，綠色代表民主的希望。

---

捷克共和國

在此基礎(chǔ)上，我們來看看捷克國旗的繪制方法：

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

這工作得很好，但請注意我們?nèi)绾问褂?#fff 兩次。如果我們只能使用它一次不是很好嗎？正如您可能已經(jīng)猜到的，答案是我們可以！梯度漸變不一定需要從 0 度開始。我們可以使用 from [angle] 指定起始位置。

例如，假設(shè)我們要從紅色開始：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

角度可以是正值或負(fù)值，那么我們將分別順時針或逆時針移動起點。

---

組合漸變

我們已經(jīng)學(xué)習(xí)了如何使用線性、徑向和圓錐漸變來生成相對簡單的標(biāo)志……但有時標(biāo)志可能會變得復(fù)雜，單個漸變是行不通的。這種情況我們能做什么？

CSS 允許在一個元素中使用多個背景圖像（和漸變）。我們需要用逗號分隔它們的值。因為這可能違反直覺，但要記住的一件重要事情是頂部背景將重疊并隱藏底部背景。

瑞典

瑞典國旗是藍(lán)色背景上的黃色十字。我們可以使用線性漸變透明-黃色-透明生成每個黃色條：

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

這個例子的內(nèi)容遠(yuǎn)不止表面上看的那樣：

• 它展示了如何組合多個漸變 -用逗號分隔它們.
• 它添加了背景顏色。請注意顏色始終位于背景列表中的最后。如果將其放置在列表中的其他位置，它將無效并且不顯示任何背景。
• 它使用絕對單位。到目前為止，我們一直使用百分比來表示漸變，但沒有理由在方便時不使用其他單位。

---

巴哈馬

雖然之前的標(biāo)志顯示了多個漸變效果，但由于使用了透明度，因此無法很好地展示它們?nèi)绾味询B。那么，讓我們看另一個例子 – 使用不同類型的多個漸變。

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

組合背景時，您不僅限于一種漸變類型。您可以使用任何類型。

---

更改尺寸和位置

到目前為止，我們已經(jīng)了解了線性、徑向和圓錐漸變，以及如何組合它們。但在所有情況下，梯度占據(jù)了整個標(biāo)志。有些透明膠片可能不會讓它看起來那樣，但漸變的大小始終是寬度和高度的 100%。

但是有一些方法可以改變漸變的大小以更好地滿足我們的需求。最簡單的一種是指定背景大小。如果尺寸小于容器，背景將重復(fù)（除非我們使用諸如background-repeat: none之類的東西。）

卡塔爾

讓我們回顧一下帶有卡塔爾國旗的示例。該標(biāo)志重復(fù)一個圖案九次，并且可以使用圓錐梯度輕松復(fù)制。如果我們指定漸變的寬度為flag的100%，高度為flag高度的九分之一，瀏覽器就會重復(fù)背景，直到容器被填滿，為我們完成繪制。

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

---

瑞典……又來了！

當(dāng)然，一旦我們指定了尺寸，我們也可以指定漸變所在的位置。我們將使用背景位置來做到這一點（這就是背景重復(fù)屬性會派上用場的地方）。

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

請注意，我們不需要指定最后一種顏色的大小和位置。只能設(shè)置一個，會自動占據(jù)整個容器。

我們可以用逗號分隔背景圖像、大小和位置的值。當(dāng)只有幾個背景時，這很方便，但如果我們有多個背景，那就很麻煩了。很容易迷失方向并混淆價值觀。

相反，我們可以使用background屬性的縮寫形式一次性提供所有值：background：漸變位置/大小重復(fù)，如下所示：

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

---

重復(fù)漸變

我們已經(jīng)看到了線性、徑向和圓錐漸變，但每種變化都允許我們添加“顏色圖案”。旗幟非常適合此目的：許多旗幟由重復(fù)的水平線組成。

我說的是重復(fù)漸變。它們的行為與常規(guī)漸變相同，它們重復(fù)指定的圖案，直到達到 100% 或 360 度。共有三個重復(fù)漸變：

• 重復(fù)線性漸變
• 重復(fù)徑向漸變
• 重復(fù)圓錐曲線

希臘

我們以希臘國旗為例。我們可以使用 3 或 4 個大的線性漸變來實現(xiàn)它，或者我們可以使用三個重復(fù)的線性漸變：

• 一個重復(fù)的線性漸變來生成十字的垂直部分（使用透明和白色）
• 第二個重復(fù)線性漸變來生成十字的水平部分（使用藍(lán)色和白色）
• 最后一個重復(fù)線性漸變來繪制后面的九個條。

為了實現(xiàn)左上角的十字，我們必須定義前兩個線性漸變的位置和大小。

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(#000 33.33%, #f00 0 66.66%, #fc0 0);
}

---

烏干達

烏干達的國旗上有一只美麗的灰冠鶴，出于實際原因，我們不會在 CSS 中對其進行編碼。我們將重點關(guān)注另外兩個標(biāo)志部分：中心的白色圓圈和幾條黑色、黃色和紅色的水平線。

這個組合可以通過兩種不同的方式實現(xiàn)：

• 使用占據(jù)旗幟整個高度的重復(fù)線性漸變；或
• 單個線性漸變僅占據(jù)標(biāo)志的一半，瀏覽器將自動重復(fù)它以填充剩余空間。

第一個選項是這樣的：

<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 中，就像在任何其他編程風(fēng)格中一樣，通常有不止一種方法可以實現(xiàn)我們的目標(biāo)。

---

使用偽元素

術(shù)語“單元素標(biāo)志”可能會產(chǎn)生誤導(dǎo)。所有非空 HTML 元素至少包括兩個我們可以用來繪制的偽元素：::before 和 ::after。因此，我們確實擁有三個可以單獨設(shè)計樣式并提供多種可能性的元素：

• 需要一些旋轉(zhuǎn)的繪圖。在 CSS 中使用背景的一個限制是它們無法旋轉(zhuǎn)。
• 復(fù)雜的形狀可以受益于使用邊框半徑、剪輯路徑、遮罩的強大功能...
• 為了使設(shè)計看起來更干凈：剪切路徑的邊緣比漸變的邊緣更平滑。

巴林

如果您如上所述使用漸變對卡塔爾國旗進行編碼，您可能會注意到漸變的三角形邊緣在某些顯示器上看起來過于鋒利且丑陋。有很多方法可以解決這個問題，但我喜歡的一個解決方案是使用帶有剪輯路徑的偽元素來使線條更平滑、更清晰。

與使用多個線性漸變和下一節(jié)中解釋的像素差異技巧相比，此選項將簡化代碼。

.flag.germany {
  aspect-ratio: 5 / 3;
  background: linear-gradient(
    #000  0.00%  33.33%,
    #f00 33.33%  66.66%,
    #fc0 66.66% 100.00%
  );
}

這種情況下的偽元素不必局限于復(fù)雜的模式。以古巴、巴哈馬或約旦的國旗為例。它們的左側(cè)有我們使用圓錐漸變繪制的三角形。這些漸變有一個問題：邊緣在某些顯示器上看起來太硬或像素化——下一節(jié)中有一個使用線性漸變解決這個問題的技巧——。相反，我們可以使用偽元素（三點多邊形路徑）創(chuàng)建三角形，并且邊緣看起來會更平滑。類似于上面的巴林國旗。

---

巴拿馬

我獲得了五點星形頂點的近似點，并在?::before 和?::after 偽元素中使用 Clip-path 應(yīng)用它們。許多CSS藝術(shù)家會考慮使用剪輯路徑作弊，并且可以使用圓錐漸變來繪制星形。但為了簡單起見，我將其保留為剪輯路徑。

添加圓錐漸變作為國旗背景，以及偽元素中的星星，我們很快就可以畫出巴拿馬國旗：

<div>





<pre class="brush:php;toolbar:false">.flag {
  display: inline-grid;
  height: 1em;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}

---

提醒和提示

堆疊漸變

請記住，當(dāng)您組合背景時，它們將按照列出的順序堆疊。這意味著，第一個將位于頂部并與下面的重疊，然后是。

雖然從設(shè)計的角度來看是有意義的，但從 CSS 的角度來看可能是違反直覺的，因為級聯(lián)使得屬性或類的最后一次出現(xiàn)優(yōu)先于之前定義的屬性或類。

1px 差異技巧

在文章中，我提到漸變邊緣可能看起來太銳利或像素化。發(fā)生這種情況是因為瀏覽器渲染漸變的方式 - 這很煩人，特別是因為 SVG 上的硬停止邊緣不會發(fā)生這種情況。

例如，這里的線條在所有顯示器上看起來可能不太好：

.flag.poland {
  background: linear-gradient(white 50%, red 50%);
  aspect-ratio: 8 / 5;
}

避免這種情況的一個技巧是在端點和下一個起點之間添加像素差異?？梢苑謩e從其中每個減去或添加 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%
  );
}

不要忘記重復(fù)漸變中的 0

使用重復(fù)漸變時的一個常見錯誤是沒有為第一種顏色添加起點。這將導(dǎo)致漸變看起來很時髦。如果您的重復(fù)漸變沒有按預(yù)期工作，請務(wù)必驗證您是否在其中添加了 0（或任何值）！

不要害怕偽元素

偽元素一開始可能會令人生畏，但它們與任何其他元素沒有什么不同，它們只是附加到 HTML 元素上。

不要忘記為 content 屬性添加一個值（當(dāng)您只想讓它出現(xiàn)時，空字符串很常見）。否則，偽元素將不可見！

Clip-Path 是您的朋友

在CSS中繪圖和創(chuàng)建CSS Art時，很多人會聲稱使用clip-path屬性是作弊。它使事情變得更容易，并且是您腰帶上的有用工具。我不會因為它是“作弊”就丟棄它。

學(xué)習(xí)如何使用剪輯路徑 - 和蒙版！ - 它最終會在項目中派上用場。

結(jié)論

現(xiàn)在是時候練習(xí) CSS 漸變了。請嘗試一下并嘗試自己重新創(chuàng)建一些標(biāo)志。以下是具有良好旗幟可供練習(xí)的國家/地區(qū)列表（按復(fù)雜程度排序）：

• 摩納哥
• 也門
• 阿拉伯聯(lián)合酋長國
• 老撾
• 冰島
• 多米尼加共和國（無國徽）
• 圣盧西亞

請記?。簺]有唯一的標(biāo)志編碼方式。其中每一個都可以通過多種不同的方式來完成。使用您更熟悉或知道看起來最好的漸變。

以上是Alvaro Montoro 展示：使用 CSS 享受旗幟樂趣的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！