在本文中，我們將透過(guò)使用單一 HTML 元素為每個(gè)標(biāo)誌建立不同的標(biāo)誌來(lái)回顧 CSS 漸層。作為體驗(yàn)的一部分，我們還將檢查 ::before 和 ::after 偽元素以及 Clip-path 屬性。

我們將編寫簡(jiǎn)單的標(biāo)誌並避免編寫徽章，因?yàn)樗鼈冊(cè)?CSS 中會(huì)很困難。這並非不可能，但這也不值得做。為此使用 SVG。

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

搭建舞臺(tái)

讓我們先加入標(biāo)誌的 HTML 程式碼以及一些常見(jiàn)的樣式：

<div>





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

以下是他們所做工作的簡(jiǎn)短說(shuō)明：

• display: inline-grid：這將將元素（幾乎）視為圖像並與文字對(duì)齊顯示。使用 inline-flex 或 inline-grid 將提供更強(qiáng)大的對(duì)齊可能性。
• height: 1em: 不同的旗幟有不同的尺寸。 透過(guò)設(shè)定固定高度，我們可以加入寬高比屬性來(lái)產(chǎn)生適當(dāng)?shù)膶挾?，同時(shí)保持所有標(biāo)誌具有一致的高度。
• 位置：相對(duì)：如果我們需要偽元素，它們可能需要絕對(duì)位置，並且我們希望使我們的標(biāo)誌成為該絕對(duì)定位的參考點(diǎn)。
• 溢位：隱藏：如果偽元素因任何原因溢出容器，我們希望從視圖中隱藏溢位。
• 垂直對(duì)齊：頂部：將標(biāo)誌與文字對(duì)齊將使它們看起來(lái)更好，因?yàn)樗鼈兊膶?duì)齊方式將「更自然」。

其中一些是過(guò)度設(shè)計(jì)的——是的，你可以過(guò)度設(shè)計(jì) CSS——因?yàn)榇蠖鄶?shù)標(biāo)誌不需要它們。尤其是我們將在本文中編寫的程式碼…但最終您會(huì)發(fā)現(xiàn)一些需要這些屬性的程式碼，為什麼不直接將它們放在類別中，而不是多次單獨(dú)添加它們？

---

線性漸變

線性漸進(jìn)建立在單一方向上漸進(jìn)的顏色過(guò)渡（沿著一條線，因此得名）。 預(yù)設(shè)情況下，方向是從上到下垂直，這使得創(chuàng)建標(biāo)誌變得簡(jiǎn)單。

波蘭

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

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

此漸層將白色設(shè)定為從頂部開(kāi)始的顏色，直到達(dá)到 50%（標(biāo)誌的一半），然後變?yōu)榧t色，也從 50% 開(kāi)始。

我們也加入了縱橫比：8 / 5；因?yàn)檫@是波蘭國(guó)旗的官方比例 (5:8)。請(qǐng)隨意忽略以下範(fàn)例中的該屬性，但請(qǐng)記住要添加它，否則標(biāo)誌將沒(méi)有寬度並且將不可見(jiàn)！

---

德國(guó)

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

德國(guó)國(guó)旗就是一個(gè)例子，我們從上到下有三種顏色：

<div>





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

我們刻意將這個(gè)範(fàn)例的符號(hào)設(shè)定為多行且特別冗長(zhǎng)。請(qǐng)注意我們?nèi)绾卧谠撝滇崦嫘略鰞蓚€(gè)值。它們分別是每種顏色的起點(diǎn)和終點(diǎn)。在上面的範(fàn)例中，黑色將從頂部(0%) 開(kāi)始，到達(dá)旗幟的三分之一(33.33%)，紅色將從頂部(33.33%) 開(kāi)始，到達(dá)旗幟的三分之二(66.66%) ） ，最後，黃色將在66.66% 之後直接開(kāi)始，一直到旗子底部（100%）。在標(biāo)誌的情況下，結(jié)束值和隨後的起始值將匹配，但如果不匹配，瀏覽器將逐漸過(guò)渡顏色。

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

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

---

比利時(shí)

如果我們只能產(chǎn)生垂直線性漸變，那就太無(wú)聊了，而且沒(méi)用。有多種方法可以改變漸層繪製的方向。讓我們檢查其中幾個(gè)：

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

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

<div>





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

---

徑向漸變

徑向漸進(jìn)建立從一個(gè)原點(diǎn)到所有方向的漸進(jìn)顏色過(guò)渡，產(chǎn)生看起來(lái)像顏色橢圓的徑向效果（如果邊相等，則為圓形）。 預(yù)設(shè)情況下，該點(diǎn)是元素的絕對(duì)中心 –水平和垂直。

需要考慮的一些重要事項(xiàng)：

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

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

日本

日本國(guó)旗是白旗中央的一個(gè)大紅圓圈。這是我們能找到的最簡(jiǎn)單的徑向漸層之一，我們將使用先前回顧過(guò)的circle關(guān)鍵字，因?yàn)闃?biāo)誌是矩形的，如果我們不使用它，我們將得到一個(gè)橢圓形。

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

我們將最接近邊尺寸關(guān)鍵字與圓形關(guān)鍵字結(jié)合起來(lái)，產(chǎn)生高度為 60% 的圓形（因?yàn)轫敳亢偷撞窟叡茸髠?cè)和右側(cè)更近）。

---

孟加拉

如果我們只能從元素的中心創(chuàng)建圓形和橢圓形，我們可以使用 CSS 複製一些標(biāo)誌（例如寮國(guó)或蒲隆地）。儘管如此，我們還是無(wú)法發(fā)展其他偏離中心的圈子（例如哥斯大黎加或衣索比亞）。

radial-gradient() 方法允許我們指示漸變的原點(diǎn)。我們透過(guò)在 size 和 shape 關(guān)鍵字（如果有）之後使用 at posX posY 來(lái)實(shí)現(xiàn)。讓我們?cè)囍盟鼇?lái)創(chuàng)造孟加拉的國(guó)旗：

<div>





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

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

為了避免這種情況，我們可以指定寬度和高度的絕對(duì)大小。如果我們這樣做，我們將無(wú)法識(shí)別它是圓形還是橢圓形，因?yàn)檫@些絕對(duì)值將決定形狀。

---

圓錐曲線漸變

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

與徑向漸變一樣，圓錐曲線漸變的預(yù)設(shè)原點(diǎn)是元素的絕對(duì)中心。同樣作為徑向漸變，我們可以透過(guò)使用 at posX posY 來(lái)更改該點(diǎn)。

貝南

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

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

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

---

捷克共和國(guó)

在此基礎(chǔ)上，我們來(lái)看看捷克國(guó)旗的繪製方法：

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

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

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

<div>





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

角度可以是正值或負(fù)值，那麼我們將分別順時(shí)針或逆時(shí)針移動(dòng)起點(diǎn)。

---

組合漸變

我們已經(jīng)學(xué)習(xí)瞭如何使用線性、徑向和圓錐漸變來(lái)產(chǎn)生相對(duì)簡(jiǎn)單的標(biāo)誌…但有時(shí)標(biāo)誌可能會(huì)變得複雜，單一漸變是行不通的。這種情況我們能做什麼？

CSS 允許在一個(gè)元素中使用多個(gè)背景影像（和漸變）。我們需要用逗號(hào)分隔它們的值。因?yàn)檫@可能違反直覺(jué)，但要記住的一件重要事情是頂部背景將重疊並隱藏底部背景。

瑞典

瑞典國(guó)旗是藍(lán)色背景上的黃色十字。我們可以使用線性漸變透明-黃色-透明來(lái)產(chǎn)生每個(gè)黃色條：

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

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

• 它顯示如何組合多個(gè)漸變 -用逗號(hào)分隔它們.
• 它添加了背景顏色。請(qǐng)注意顏色始終位於背景清單中的最後。如果將其放置在清單中的其他位置，它將無(wú)效並且不顯示任何背景。
• 它使用絕對(duì)單位。到目前為止，我們一直使用百分比來(lái)表示漸變，但沒(méi)有理由在方便時(shí)不使用其他單位。

---

巴哈馬

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

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

組合背景時(shí)，您不僅限於一種漸變類型。您可以使用任何類型。

---

更改尺寸和位置

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

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

卡達(dá)

讓我們回顧一下帶有卡達(dá)國(guó)旗的範(fàn)例。該標(biāo)誌重複一個(gè)圖案九次，並且可以使用圓錐梯度輕鬆複製。如果我們指定漸變的寬度為flag的100%，高度為flag高度的九分之一，瀏覽器就會(huì)重複背景，直到容器被填滿，為我們完成繪圖。

<div>





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

---

瑞典……又來(lái)了！

當(dāng)然，一旦我們指定了尺寸，我們也可以指定漸變所在的位置。我們將使用背景位置來(lái)做到這一點(diǎn)（這就是背景重複屬性會(huì)派上用場(chǎng)的地方）。

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

請(qǐng)注意，我們不需要指定最後一種顏色的大小和位置。只能設(shè)定一個(gè)，會(huì)自動(dòng)佔(zhàn)據(jù)整個(gè)容器。

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

相反，我們可以使用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%
  );
}

---

重複漸變

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

我說(shuō)的是重複漸層。它們的行為與常規(guī)漸變相同，它們重複指定的圖案，直到達(dá)到 100% 或 360 度。共有三個(gè)重複漸層：

• 重複線性漸層
• 重複徑向漸層
• 重複圓錐曲線

希臘

我們以希臘國(guó)旗為例。我們可以使用 3 或 4 個(gè)大的線性漸變來(lái)實(shí)現(xiàn)它，或者我們可以使用三個(gè)重複的線性漸變：

• 一個(gè)重複的線性漸變來(lái)產(chǎn)生十字的垂直部分（使用透明和白色）
• 第二個(gè)重複線性漸變來(lái)產(chǎn)生十字的水平部分（使用藍(lán)色和白色）
• 最後一個(gè)重複線性漸變來(lái)繪製後面的九個(gè)條。

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

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

---

烏幹達(dá)

烏幹達(dá)的國(guó)旗上有一隻美麗的灰冠鶴，出於實(shí)際原因，我們不會(huì)在 CSS 中對(duì)其進(jìn)行編碼。我們將重點(diǎn)放在另外兩個(gè)標(biāo)誌部分：中心的白色圓圈和幾條黑色、黃色和紅色的水平線。

這個(gè)組合可以透過(guò)兩種不同的方式來(lái)實(shí)現(xiàn)：

• 使用佔(zhàn)據(jù)旗幟整個(gè)高度的重複線性漸變；或
• 單一線性漸變僅佔(zhàn)據(jù)標(biāo)誌的一半，瀏覽器將自動(dòng)重複它以填充剩餘空間。

第一個(gè)選項(xiàng)是這樣的：

<div>





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

第二個(gè)選項(xiàng)如下：

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

但這兩個(gè)選項(xiàng)最終看起來(lái)都是一樣的。重要的是要記住，在 CSS 中，就像在任何其他程式設(shè)計(jì)風(fēng)格中一樣，通常有不只一種方法可以實(shí)現(xiàn)我們的目標(biāo)。

---

使用偽元素

術(shù)語(yǔ)「單元素標(biāo)誌」可能會(huì)產(chǎn)生誤導(dǎo)。所有非空 HTML 元素至少包括兩個(gè)我們可以用來(lái)繪製的偽元素：::before 和 ::after。因此，我們確實(shí)擁有三個(gè)可以單獨(dú)設(shè)計(jì)樣式並提供多種可能性的元素：

• 需要一些旋轉(zhuǎn)的繪圖。在 CSS 中使用背景的一個(gè)限制是它們無(wú)法旋轉(zhuǎn)。
• 複雜的形狀可以受益於使用邊框半徑、剪輯路徑、遮罩的強(qiáng)大功能...
• 為了讓設(shè)計(jì)看起來(lái)更乾淨(jìng)：剪切路徑的邊緣比漸層的邊緣更平滑。

巴林

如果您如上所述使用漸層對(duì)卡達(dá)國(guó)旗進(jìn)行編碼，您可能會(huì)注意到漸層的三角形邊緣在某些顯示器上看起來(lái)過(guò)於鋒利且醜陋。有很多方法可以解決這個(gè)問(wèn)題，但我喜歡的解決方案是使用帶有剪輯路徑的偽元素來(lái)使線條更平滑、更清晰。

與使用多個(gè)線性漸變和下一節(jié)中解釋的像素差異技巧相比，此選項(xiàng)將簡(jiǎn)化程式碼。

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

這種情況下的偽元素不必局限於複雜的模式。以古巴、巴哈馬或約旦的國(guó)旗為例。它們的左側(cè)有一個(gè)我們使用圓錐漸層繪製的三角形。這些漸層有一個(gè)問(wèn)題：邊緣在某些顯示器上看起來(lái)太硬或像素化——下一節(jié)中有一個(gè)使用線性漸層解決這個(gè)問(wèn)題的技巧——。相反，我們可以使用偽元素（三點(diǎn)多邊形路徑）來(lái)建立三角形，並且邊緣看起來(lái)會(huì)更平滑。類似上面的巴林國(guó)旗。

---

巴拿馬

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

加入圓錐漸層作為國(guó)旗背景，以及偽元素中的星星，我們很快就可以畫出巴拿馬國(guó)旗：

<div>





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

---

提醒和提示

堆疊漸變

請(qǐng)記住，當(dāng)您組合背景時(shí)，它們將按照列出的順序堆疊。這意味著，第一個(gè)將位於頂部並與下面的重疊，然後是。

雖然從設(shè)計(jì)的角度來(lái)看是有意義的，但從 CSS 的角度來(lái)看可能是違反直覺(jué)的，因?yàn)榧?jí)聯(lián)使得屬性或類別的最後一次出現(xiàn)優(yōu)先於先前定義的屬性或類別。

1px 差異技巧

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

例如，這裡的線條在所有顯示器上看起來(lái)可能不太好：

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

避免這種情況的一個(gè)技巧是在端點(diǎn)和下一個(gè)起點(diǎn)之間添加像素差異。可以分別從其中每個(gè)減去或添加 0.5px，或更簡(jiǎn)單，只需從其中一個(gè)減去/添加 1px。這條線在所有顯示器上看起來(lái)都很平滑：

.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

使用重複漸變時(shí)的一個(gè)常見(jiàn)錯(cuò)誤是沒(méi)有為第一種顏色添加起點(diǎn)。這將導(dǎo)致漸變看起來(lái)很時(shí)髦。如果您的重複漸變沒(méi)有如預(yù)期般運(yùn)作，請(qǐng)務(wù)必驗(yàn)證您是否在其中新增了 0（或任何值）！

不要害怕偽元素

偽元素一開(kāi)始可能會(huì)令人生畏，但它們與任何其他元素沒(méi)有什麼不同，它們只是附加到 HTML 元素上。

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

Clip-Path 是您的朋友

在CSS中繪圖和創(chuàng)建CSS Art時(shí)，很多人會(huì)聲稱使用clip-path屬性是作弊。它使事情變得更容易，並且是您腰帶上的有用工具。我不會(huì)因?yàn)樗恰缸鞅住咕蛠G棄它。

學(xué)習(xí)如何使用剪輯路徑 - 和蒙版！ - 它最終會(huì)在專案中派上用場(chǎng)。

結(jié)論

現(xiàn)在是時(shí)候練習(xí) CSS 漸層了。請(qǐng)嘗試一下並嘗試自己重新創(chuàng)建一些標(biāo)誌。以下是具有良好旗幟可供練習(xí)的國(guó)家/地區(qū)清單（按複雜程度排序）：

• 摩納哥
• 也門
• 阿拉伯聯(lián)合大公國(guó)
• 寮國(guó)
• 冰島
• 多明尼加共和國(guó)（無(wú)國(guó)徽）
• 聖露西亞

請(qǐng)記?。簺](méi)有唯一的標(biāo)誌編碼方式。其中每一個(gè)都可以透過(guò)多種不同的方式來(lái)完成。使用您更熟悉或知道看起來(lái)最好的漸變。

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