CSS 框陰影教程：分步指南（+ 示例）

已發表: 2022-03-09

為什麼box-shadow CSS 屬性值得擁有自己的教程？ 因為，正如您將在下面看到的，它是同時採用多個值的更複雜的屬性之一。 這對初學者來說可能特別具有挑戰性。

如果到目前為止您一直在努力正確使用box-shadow ，那麼您來對地方了。 在下面的指南中，我們將介紹有關此 CSS 屬性的所有信息。 我們將討論它的作用，如何正確使用它的語法，一些很酷的 CSS box-shadow示例，最後是一些使它更容易使用的生成器工具。

什麼是 CSS 盒子陰影？

即使您直到現在還不知道 CSS box-shadow屬性，您也可能已經在網絡上看到了它。

css盒子陰影教程示例

上面是它在野外的樣子的一個很好的例子（即使我在這裡稍微增加了它以表明一點）。 box-shadow基本上就像名字所說的那樣：它允許您向幾乎任何元素的框架添加陰影。 陰影也會依附於其錨點的形狀，無論是方形、矩形、圓形還是橢圓形。 當您設置了border-radius屬性時，這甚至是正確的。

框陰影堅持錨元素形狀示例

在網絡上，人們使用它來創建許多不同的效果，我們將在下面看到一些有趣box-shadow示例。 現在，讓我們談談它在最基本的層面上是如何工作的。

基本框陰影語法

當您使用瀏覽器開發工具查看帶有框陰影的元素時，您會發現如下標記：

 box-shadow: inset 0 25px 40px 0 rgba(0, 0, 0, 0.3);

看起來有點複雜，對吧？

但請放心，您並不總是需要所有這些聲明。 另外，一旦您了解了它們的工作原理，它就不再像開始時那樣令人困惑。

正如你在上面看到的， box-shadow最多可以取六個值。 讓我們一一介紹。

偏移量-x

第一個值是投影與其錨元素側面的水平距離。 正值將其向右移動，負值向左移動。

您可以使用所有表示該值長度的常見 CSS 數據類型，例如px 、 em 、 vh等。 最常用的是px和em 。

偏移 x 示例

偏移-y

與上述相同，但對於垂直軸。 正值將陰影移動到元素下方，負值在上方移動。

偏移 y 示例

模糊半徑

這定義了盒子陰影的模糊。 值越高，它就越模糊。 blur-radius也採用所有常見的 CSS 長度面額，但沒有負值。

模糊半徑示例

擴散半徑

這個控制陰影的擴散超出其元素的高度或寬度。 長度越高，傳播越大。 您也可以使用負數來引入收縮。

傳播半徑示例

顏色

正如您可能猜到的，這允許您以所有常用方式定義框陰影的顏色。 它最常以十六進制（例如#ededed ）或 rgba （例如rgba(46, 182, 142, 0.9) ）值表示。 後者還允許您控制不透明度，這通常用於投影。

盒子陰影顏色示例

注意，如果不設置顏色，瀏覽器將使用當前使用的文本顏色。

插圖

最後，您可以選擇在聲明的開頭添加inset 。 這會將陰影從投影更改為元素內部的陰影。 它出現在邊框內，在背景之上，但在元素內容之下，因此它不會覆蓋任何文本。

插入框陰影示例

按順序使用值

這是box-shadow屬性值出現的順序。

 box-shadow: offset-x offset-y blur-radius spread-radius color inset;

要分配一個盒子陰影，您至少需要兩個長度值。 瀏覽器將自動使用那些offset-x和offset-y 。 如果添加第三個，它將被解釋為blur-radius ，第四個被解釋為spread-radius 。 inset和color是可選的，可以以任何順序出現在末尾或開頭。 下面的 CSS 都將具有相同的結果。

 box-shadow: 20px 20px 10px 0 inset rgba(0, 0, 0, 0.5); box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: inset 20px 20px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: rgba(0, 0, 0, 0.5) 20px 20px 10px 0 inset; box-shadow: rgba(0, 0, 0, 0.5) inset 20px 20px 10px 0; box-shadow: inset rgba(0, 0, 0, 0.5) 20px 20px 10px 0;

指定多個盒子陰影

不是每個人都知道的是，您可以為同一個元素設置多個框陰影。 為此，只需提供一組以上的值並用逗號分隔它們。

 box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5), -20px -20px 10px 0 olive;

上面的代碼看起來像這樣：

多個盒子陰影示例

您還可以使用它在元素周圍創建線條。 為此，您只需添加幾個不同顏色的陰影並將它們的偏移和模糊設置為零。

 box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 10px olive;

這會產生不同顏色的輪廓：

多個框陰影作為輪廓示例

請注意，這不會影響盒子模型的尺寸，因此盒子陰影不會像margin或border那樣增加元素的整體大小。

瀏覽器兼容性

box-shadow的瀏覽器兼容性並不是您真正需要擔心的事情。 這是一個非常成熟的 CSS 屬性，幾乎每個瀏覽器都接受，包括像inset和多重陰影這樣的標記。

css box shadow 瀏覽器兼容性

為了支持某些瀏覽器的舊版本，通常包含具有相同值的-webkit-box-shadow和-moz-box-shadow屬性。 但是，對於最常見的瀏覽器的最新版本，這不再是必需的。

CSS 盒子陰影示例

接下來，在這個box-shadow教程中，我們將介紹一些 CSS box shadows 的示例，以便您了解這個屬性的可能性。 我們將從相當標準的應用程序轉向更非凡的應用程序，因為正如您將看到的，您可以用它做一些非常令人興奮的事情。

為按鈕添加陰影

按鈕通常是一個應用了盒子陰影的元素。 那是因為這是使它們在頁面上脫穎而出的好方法。 畢竟，如果你包含一個按鈕，你通常希望人們點擊它。 為了提示他們這樣做，這裡有一個簡單的例子，如何用盒子陰影做到這一點。

按鈕示例的框陰影

隨附的標記如下所示：

 box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);

柔光箱陰影

如果你想創建一個相對柔和的 CSS 盒子陰影，你主要使用 blur 和 spread 並將 offsets 設置為0 。 這樣，陰影不會得到明顯的形狀，而只會在邊緣柔和地出現。

柔光箱陰影示例

要實現上述效果，可以使用以下標記：

 box-shadow: 0 0 50px 10px #999;

這也是在元素的所有側面創建盒子陰影的好方法。 如果你想讓它更明顯，只需加快傳播，淡化模糊，並使用更深的顏色。

多個盒子陰影

最後的box-shadow示例用於一次使用多個陰影。 這提供了不同的可能性。 首先，您可以引入一個很酷的褪色、多步框陰影。

多個淡入淡出的盒子陰影示例

它非常簡單：您只需要將盒子陰影堆疊在一起，偏移量均勻增加，同時降低不透明度。 順便說一句，當使用許多盒子陰影時，將聲明寫在單獨的行中而不是一個長的聲明中會有所幫助。 使它更容易理解。

 box-shadow: 10px 10px rgba(0, 0, 0, 0.4), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px rgba(0, 0, 0, 0.05);

您還可以通過在其間引入具有負spread-radius值的白框陰影來進一步實現這一點，從而產生多個元素相互疊加的錯覺。

帶有空格的多個框陰影示例

為什麼是負點差值？ 因為否則白框陰影會覆蓋它們下方的陰影。 負值會使它們縮小，以便後面的顏色可以透出來。 如果您想在自己的網站上引入類似的效果，以下是您需要的標記：

 box-shadow: 10px 10px 0px -3px rgba(255, 255, 255), 10px 10px rgba(0, 0, 0, 0.4), 20px 20px 0px -3px rgba(255, 255, 255), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px 0px -3px rgba(255, 255, 255), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px 0px -3px rgba(255, 255, 255), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px 0px -3px rgba(255, 255, 255), 50px 50px rgba(0, 0, 0, 0.05);

幾個 CSS 盒子陰影的最後一個例子是前面提到的將偏移量和模糊設置為0的方法。 正如我們在上面看到的，它導致元素有幾個輪廓，在這種情況下是彩色的。 然而，這只是因為每個盒子陰影的spread-radius值都會增加。

多個彩色 CSS 框陰影示例

如果您想自己嘗試一下，可以從以下開始：

 box-shadow: 0px 0px 0px 3px red, 0px 0px 0px 6px orange, 0px 0px 0px 9px yellow, 0px 0px 0px 12px green, 0px 0px 0px 15px blue, 0px 0px 0px 18px indigo, 0px 0px 0px 21px violet;

最好的盒子陰影發生器

正如我們所介紹的， box-shadow需要很多值。 因此，在你得到你想要的陰影之前，可能需要一些試驗和錯誤。

為了使它更容易，有很多盒子陰影生成器工具可以讓您使用它們的控件，立即查看結果，然後在滿意後簡單地複制標記。

css 框陰影生成器工具示例

以下是盒形陰影生成器的最佳選擇：

  • box-shadow.dev — 這個單一用途的工具具有您需要的所有功能和最好的用戶界面。 您可以使用inset ，創建多個框陰影，通過滑塊控制偏移、模糊和散佈，以及手動輸入顏色。 滿意後，單擊顯示代碼以復制 CSS 標記。 唯一的缺點是它不為舊瀏覽器提供代碼。
  • CSSmatic Box Shadow CSS Generator — 與上麵類似。 允許您通過滑塊控制box-shadow屬性並手動輸入數字。 有自己的不透明度控制，這很好。 另一方面，它缺少多個陰影的功能。 您獲得的代碼標記包括舊版瀏覽器。
  • Box Shadow CSS Generator - 一個可靠的選項，它還具有顏色選擇功能，並為您提供舊瀏覽器的代碼。 您只需單擊即可複制它。 它具有不透明度控制，但只能創建一個陰影。
  • CSS3gen CSS3 Box Shadow Generator — 另一個投影生成器。 這裡的一個很酷的功能是，您可以選擇陰影角度和距離，而不是 x 和 y 偏移，其餘的工具將自動完成。 由於某種原因， spread-radius和inset有自己的菜單。 您可以簡單地複制和粘貼的 CSS 還包括舊版瀏覽器的標記。

最後的想法：CSS 盒子陰影

box-shadow屬性一開始可能會讓人不知所措。 它是那些需要很多值的屬性之一，因此它看起來可能比實際更複雜。 希望這個 CSS box-shadow 教程能讓這種感覺平靜下來。

上面，我們已經了解了 CSS box-shadow是什麼以及它是如何工作的。 我們已經解釋了語法、值以及它們如何協同工作。 此外，我們還介紹了一些如何在現實生活中使用 CSS 盒子陰影的示例，包括您可以立即使用的標記。 最後，對於那些需要一點幫助的人，我們列出了一些 CSS box-shadow生成器，它們可以為您完成很多繁重的工作。

現在，您應該可以在您的網站上使用此 CSS 功能了。 我們期待看到你用它做什麼。

你是如何在你的網站上使用 CSS 盒子陰影的？ 上面沒有提到的任何令人興奮的用例？ 在下面的評論中讓我們知道！