經(jīng)常有人問我這樣一個問題：能否用漸變色而不是純色來創(chuàng)建陰影？ CSS中沒有專門的屬性可以實現(xiàn)這一點（相信我，我已經(jīng)找過了），任何你找到的關(guān)于這方面的博文基本上都是一些近似漸變的CSS技巧。我們接下來會介紹其中一些技巧。

但首先……又是關(guān)于漸變陰影的文章？真的嗎？

是的，這又是關(guān)于這個主題的另一篇文章，但它有所不同。我們將一起突破極限，尋找一個解決方案，涵蓋我從未在其他地方見過的內(nèi)容：透明度。大多數(shù)技巧在元素具有非透明背景時有效，但如果我們有透明背景怎么辦？我們將在此探討這種情況！

在我們開始之前，讓我介紹一下我的漸變陰影生成器。你只需調(diào)整配置，即可獲得代碼。但請繼續(xù)閱讀，因為我將幫助你理解生成代碼背后的所有邏輯。

目錄

• 非透明解決方案
• 透明解決方案
• 添加圓角
• 總結(jié)

非透明解決方案

讓我們從適用于80% 常見情況的解決方案開始。最典型的情況是：你正在使用一個帶有背景的元素，并且需要向其添加漸變陰影。這里不需要考慮透明度問題。

解決方案是依靠一個定義了漸變的偽元素。你把它放在實際元素的后面，并對其應(yīng)用模糊濾鏡。

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

代碼看起來很多，這是因為它確實很多。以下是如何使用box-shadow代替它，如果我們使用純色而不是漸變色的話。

<code>box-shadow: 10px 8px 10px 5px orange;</code>

這應(yīng)該讓你很好地了解第一段代碼中值的作用。我們有X和Y偏移量、模糊半徑和擴散距離。請注意，我們需要一個來自inset屬性的負擴散距離值。

這是一個演示，顯示了漸變陰影與經(jīng)典box-shadow并排：

如果你仔細觀察，你會注意到兩個陰影略有不同，尤其是模糊部分。這并不奇怪，因為我很確定filter屬性的算法與box-shadow的算法不同。這沒什么大不了的，因為最終結(jié)果非常相似。

這個解決方案很好，但仍然有一些與z-index:-1聲明相關(guān)的缺點。是的，那里發(fā)生了“堆疊上下文”！

我向主元素應(yīng)用了一個轉(zhuǎn)換，然后，陰影不再位于元素下方。這不是錯誤，而是堆疊上下文的邏輯結(jié)果。別擔(dān)心，我不會開始對堆疊上下文進行枯燥的解釋（我已經(jīng)在Stack Overflow線程中做過這個了），但我仍然會向你展示如何解決它。

我推薦的第一個解決方案是使用3D轉(zhuǎn)換：

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

我們不使用z-index: -1，而是使用沿Z軸的負平移。我們將所有內(nèi)容都放在translate3d()中。不要忘記在主元素上使用transform-style: preserve-3d；否則，3D轉(zhuǎn)換將不會生效。

據(jù)我所知，這個解決方案沒有任何副作用……但也許你會看到一個。如果是這樣，請在評論區(qū)分享，讓我們嘗試找到一個解決方法！

如果由于某種原因你無法使用3D轉(zhuǎn)換，另一個解決方案是依靠兩個偽元素——::before和::after。一個創(chuàng)建漸變陰影，另一個復(fù)制主背景（以及你可能需要的其他樣式）。這樣，我們可以輕松控制兩個偽元素的堆疊順序。

<code>box-shadow: 10px 8px 10px 5px orange;</code>

重要的是要注意，我們正在通過在其上聲明z-index: 0或任何其他執(zhí)行相同操作的屬性來強制主元素創(chuàng)建堆疊上下文。此外，不要忘記偽元素將主元素的填充框視為參考。因此，如果主元素有邊框，則在定義偽元素樣式時需要考慮這一點。你會注意到我在::after上使用inset: -2px來考慮在主元素上定義的邊框。

正如我所說，只要你不需要支持透明度，這個解決方案在大多數(shù)情況下可能就足夠好了，你想要一個漸變陰影。但我們是為了挑戰(zhàn)和突破極限而來的，所以即使你不需要接下來要講的內(nèi)容，也請繼續(xù)關(guān)注。你可能會學(xué)習(xí)到可以在其他地方使用的新的CSS技巧。

透明解決方案

讓我們從我們在3D轉(zhuǎn)換中結(jié)束的地方開始，并從主元素中移除背景。我將從一個偏移量和擴散距離都等于0的陰影開始。

其想法是找到一種方法來裁剪或隱藏元素區(qū)域（綠色邊框內(nèi)）內(nèi)的所有內(nèi)容，同時保留外部內(nèi)容。我們將為此使用clip-path。但你可能會想知道clip-path如何在一個元素內(nèi)部進行裁剪。

確實，沒有辦法做到這一點，但是我們可以使用特定的多邊形圖案來模擬它：

<code>.box {
  position: relative;
  transform-style: preserve-3d;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px;
  transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */
  background: /* .. */;
  filter: blur(10px);
}</code>

瞧！我們得到了一個支持透明度的漸變陰影。我們所做的只是向之前的代碼添加了一個clip-path。這里有一張圖來說明多邊形部分。

藍色區(qū)域是在應(yīng)用clip-path后可見的部分。我只使用藍色來說明這個概念，但實際上，我們只會看到該區(qū)域內(nèi)的陰影。正如你所看到的，我們定義了四個點，它們的值很大（B）。我的大值是100vmax，但它可以是你想要的任何大值。其想法是確保我們有足夠的陰影空間。我們還有四個點是偽元素的角點。

箭頭表示定義多邊形的路徑。我們從(-B, -B)開始，直到到達(0,0)。總共我們需要10個點。不是8個點，因為路徑中重復(fù)了兩次兩個點(( -B,-B)和(0,0))。

我們還需要做最后一件事，那就是考慮擴散距離和偏移量。上面演示之所以有效，僅僅是因為這是一個特殊情況，偏移量和擴散距離都等于0。

讓我們定義擴散并看看會發(fā)生什么。記住，我們使用負值的inset來做到這一點：

偽元素現(xiàn)在比主元素大，所以clip-path裁剪的內(nèi)容比我們需要多。記住，我們總是需要裁剪主元素內(nèi)部的部分（示例中綠色邊框內(nèi)的區(qū)域）。我們需要調(diào)整clip-path中四個點的位。

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

我們?yōu)閿U散距離定義了一個CSS變量--s，并更新了多邊形點。我沒有觸及我使用大值的地方。我只更新定義偽元素角的點。我將所有零值增加--s，并將100%的值減少--s。

偏移量也是同樣的邏輯。當(dāng)我們轉(zhuǎn)換偽元素時，陰影會錯位，我們需要再次校正多邊形并將點移動到相反的方向。

<code>box-shadow: 10px 8px 10px 5px orange;</code>

還有兩個變量用于偏移量：--x和--y。我們在transform內(nèi)部使用它們，我們還更新了clip-path值。我們?nèi)匀徊挥|及具有大值的多邊形點，但我們偏移所有其他點——我們從X坐標中減少--x，從Y坐標中減少--y。

現(xiàn)在我們只需要更新一些變量來控制漸變陰影。當(dāng)我們這樣做的時候，讓我們也把模糊半徑也變成一個變量：

我們還需要3D轉(zhuǎn)換技巧嗎？

這完全取決于邊框。不要忘記偽元素的參考是填充框，因此如果你對主元素應(yīng)用邊框，你將會有重疊。你可以保留3D轉(zhuǎn)換技巧或更新inset值來考慮邊框。

這是前面演示中用更新的inset值代替3D轉(zhuǎn)換的版本：

我認為這是一種更合適的方法，因為擴散距離將更準確，因為它從border-box而不是padding-box開始。但是你需要根據(jù)主元素的邊框調(diào)整inset值。有時，元素的邊框是未知的，你必須使用之前的解決方案。

使用之前的非透明解決方案，你可能會遇到堆疊上下文問題。使用透明解決方案，你可能會遇到邊框問題。現(xiàn)在你有了解決這些問題的選擇和方法。3D轉(zhuǎn)換技巧是我最喜歡的解決方案，因為它修復(fù)了所有問題（在線生成器也會考慮它）

添加圓角

如果你嘗試在使用我們開始的非透明解決方案時向元素添加border-radius，這是一個相當(dāng)簡單的任務(wù)。你只需要從主元素繼承相同的值，就完成了。

即使你沒有圓角，定義border-radius: inherit也是一個好主意。這考慮了你以后可能想要添加的任何潛在圓角或來自其他地方的圓角。

處理透明解決方案的情況就不同了。不幸的是，這意味著要找到另一個解決方案，因為clip-path無法處理曲線。這意味著我們將無法裁剪主元素內(nèi)部的區(qū)域。

我們將mask屬性添加到混合中。

這部分非常繁瑣，我很難找到一個不依賴于幻數(shù)的通用解決方案。我最終得到了一個非常復(fù)雜的解決方案，它只使用一個偽元素，但是代碼是一團亂麻，只涵蓋了一些特定情況。我認為探索這條路不值得。

為了簡化代碼，我決定插入一個額外的元素。以下是標記：

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

我使用自定義元素來避免與外部CSS發(fā)生任何潛在沖突。我可以使用

<code>box-shadow: 10px 8px 10px 5px orange;</code>

<code>.box {
  position: relative;
  transform-style: preserve-3d;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px;
  transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */
  background: /* .. */;
  filter: blur(10px);
}</code>

<code>.box {
  position: relative;
  z-index: 0; /* 我們強制創(chuàng)建一個堆疊上下文 */
}
/* 創(chuàng)建陰影 */
.box::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -5px;
  transform: translate(10px, 8px);
  background: /* .. */;
  filter: blur(10px);
}
/* 復(fù)制主元素樣式 */
.box::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  /* 繼承在主元素上定義的所有裝飾 */
  background: inherit;
  border: inherit;
  box-shadow: inherit;
}</code>

<code>clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0)</code>

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴散 */
  transform: translate(10px, 8px); /* 控制偏移量 */
  z-index: -1; /* 將元素置于后面 */
  background: /* 你的漸變色在這里 */;
  filter: blur(10px); /* 控制模糊 */
}</code>

<code>box-shadow: 10px 8px 10px 5px orange;</code>

<code>.box {
  position: relative;
  transform-style: preserve-3d;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px;
  transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */
  background: /* .. */;
  filter: blur(10px);
}</code>

以上是獲得CSS梯度陰影的不同方法的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！