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

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

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

在我們開始之前，讓我介紹一下我的漸變陰影生成器。你只需調(diào)整配置，即可獲得代碼。但請繼續(xù)閱讀，因?yàn)槲覍椭憷斫馍纱a背後的所有邏輯。

目錄

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

非透明解決方案

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

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

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

代碼看起來很多，這是因?yàn)樗_實(shí)很多。以下是如何使用box-shadow代替它，如果我們使用純色而不是漸變色的話。

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

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

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

如果你仔細(xì)觀察，你會注意到兩個陰影略有不同，尤其是模糊部分。這並不奇怪，因?yàn)槲液艽_定filter屬性的算法與box-shadow的算法不同。這沒什麼大不了的，因?yàn)樽罱K結(jié)果非常相似。

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

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

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

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

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

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

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

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

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

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

透明解決方案

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

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

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

<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。這裡有一張圖來說明多邊形部分。

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

箭頭表示定義多邊形的路徑。我們從(-B, -B)開始，直到到達(dá)(0,0)?？偣参覀冃枰?0個點(diǎn)。不是8個點(diǎn)，因?yàn)槁窂街兄匮}了兩次兩個點(diǎn)(( -B,-B)和(0,0))。

我們還需要做最後一件事，那就是考慮擴(kuò)散距離和偏移量。上面演示之所以有效，僅僅是因?yàn)檫@是一個特殊情況，偏移量和擴(kuò)散距離都等於0。

讓我們定義擴(kuò)散並看看會發(fā)生什麼。記住，我們使用負(fù)值的inset來做到這一點(diǎn)：

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

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

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

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

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

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

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

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

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

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

我認(rèn)為這是一種更合適的方法，因?yàn)閿U(kuò)散距離將更準(zhǔn)確，因?yàn)樗鼜腷order-box而不是padding-box開始。但是你需要根據(jù)主元素的邊框調(diào)整inset值。有時，元素的邊框是未知的，你必須使用之前的解決方案。

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

添加圓角

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

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

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

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

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

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

<code>.box {
  position: relative;
}
.box::before {
  content: "";
  position: absolute;
  inset: -5px; /* 控制擴(kuò)散 */
  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; /* 我們強(qiáng)制創(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; /* 控制擴(kuò)散 */
  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梯度陰影的不同方法的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！