高階樣式效果

box-shadow 允許您將一個或多個投影應用到元素的框上。與文字陰影一樣，盒陰影在瀏覽器中得到很好的支援，包括 IE9+ 和 Edge。較舊的 IE 版本的使用者可能只能應付沒有陰影的情況，因此請測試您的設計，確保您的內容在沒有陰影的情況下仍然可讀。

您可以在 box-shadow.html 中找到本節中的示例（另請參閱 原始碼）。

讓我們看一個簡單的示例來開始。首先，一些 HTML 程式碼

<article class="simple">
  <p>
    <strong>Warning</strong>: The thermostat on the cosmic transcender has
    reached a critical level.
  </p>
</article>

現在是 CSS 程式碼

p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0%),
    rgb(0 0 0 / 25%)
  );
}

.simple {
  box-shadow: 5px 5px 5px rgb(0 0 0 / 70%);
}

這將給我們以下結果

您會看到我們在 box-shadow 屬性值中有四個專案

1. 第一個長度值是水平偏移量——陰影從原始框向右偏移的距離（或向左，如果值為負）。
2. 第二個長度值是垂直偏移量——陰影從原始框向下偏移的距離（或向上，如果值為負）。
3. 第三個長度值是模糊半徑——應用於陰影的模糊量。
4. 顏色值是陰影的基本顏色。

您可以使用任何有意義的長度和顏色單位來定義這些值。

您還可以在單個 box-shadow 宣告中指定多個盒陰影，方法是用逗號分隔它們

<article class="multiple">
  <p>
    <strong>Warning</strong>: The thermostat on the cosmic transcender has
    reached a critical level.
  </p>
</article>

p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0%),
    rgb(0 0 0 / 25%)
  );
}

.multiple {
  box-shadow: 1px 1px 1px black,
              2px 2px 1px black,
              3px 3px 1px red,
              4px 4px 1px red,
              5px 5px 1px black,
              6px 6px 1px black;
}

現在我們得到以下結果

我們在這裡做了一些有趣的事情，透過建立具有多個彩色層的凸起框，但您可以根據需要使用它，例如建立更逼真的外觀，陰影基於多個光源。

與 text-shadow 不同，box-shadow 有一個 inset 關鍵字可用——將其放在陰影宣告的開頭會導致它成為內陰影，而不是外陰影。讓我們來看看這意味著什麼。

首先，我們將使用一些不同的 HTML 程式碼作為此示例

<button>Press me!</button>

button {
  width: 150px;
  font-size: 1.1rem;
  line-height: 2;
  border-radius: 10px;
  border: none;
  background-image: linear-gradient(to bottom right, #777, #ddd);
  box-shadow:
    1px 1px 1px black,
    inset 2px 3px 5px rgb(0 0 0 / 30%),
    inset -2px -3px 5px rgb(255 255 255 / 50%);
}

button:focus,
button:hover {
  background-image: linear-gradient(to bottom right, #888, #eee);
}

button:active {
  box-shadow:
    inset 2px 2px 1px black,
    inset 2px 3px 5px rgb(0 0 0 / 30%),
    inset -2px -3px 5px rgb(255 255 255 / 50%);
}

這將給我們以下結果

在這裡，我們設定了一些按鈕樣式以及焦點/懸停/活動狀態。按鈕預設情況下設定了一個簡單的黑色盒陰影，再加上兩個內陰影，一個亮一個暗，放置在按鈕的相對角上，以使其具有良好的陰影效果。

當按鈕被按下時，活動狀態會導致第一個盒陰影被交換為非常深的內陰影，從而使按鈕看起來被按下。

雖然您不能使用 CSS 更改影像的構成，但您可以做一些有創意的事情。一個非常好的屬性，可以幫助您為您的設計帶來趣味，是 filter 屬性。此屬性直接從 CSS 啟用 Photoshop 樣式的濾鏡。

在下面的示例中，我們使用了兩個不同的濾鏡值。first 是 blur()——此函式可以傳遞一個值來指示影像應該模糊多少。

第二個是 grayscale()；透過使用百分比，我們設定了要刪除的顏色量。

在即時示例中使用百分比和畫素引數進行調整，以檢視影像如何變化。您也可以將這些值換成其他一些值。在上面的即時示例中嘗試 contrast(200%)、invert(100%) 或 hue-rotate(20deg)。檢視 filter 的 MDN 頁面，瞭解您可以嘗試的許多其他選項。

您可以將濾鏡應用於任何元素，而不僅僅是影像。一些可用的濾鏡選項與其他 CSS 功能非常相似，例如 drop-shadow() 的工作方式非常相似，並且與 box-shadow 或 text-shadow 具有相似的效果。但是，濾鏡真正的好處在於它們可以作用於框內內容的確切形狀，而不僅僅是框本身作為一大塊，因此瞭解區別非常重要。

在接下來的示例中，我們將濾鏡應用於一個框，並將其與一個盒陰影進行比較。如您所見，drop-shadow 濾鏡遵循文字和邊框破折號的確切形狀。盒陰影只遵循框的正方形。

CSS 混合模式允許我們在元素中新增混合模式，指定兩個元素重疊時的混合效果——每個畫素顯示的最終顏色將是原始畫素顏色與其下方圖層中畫素顏色的組合結果。混合模式對於使用 Photoshop 等圖形應用程式的使用者來說非常熟悉。

CSS 中有兩個使用混合模式的屬性

• background-blend-mode，它將單個元素上設定的多個背景影像和顏色混合在一起。
• mix-blend-mode，它將它所設定的元素與其重疊的元素混合在一起——包括背景和內容。

您可以在我們的 blend-modes.html 示例頁面（檢視 原始碼）和 <blend-mode> 參考頁面上找到比這裡更多的一些示例。

再次，讓我們看一些示例，以便我們更好地理解這一點。首先，background-blend-mode——在這裡我們將顯示幾個簡單的 <div>，這樣您就可以比較原始版本和混合版本

<div></div>
<div class="multiply"></div>

現在是一些 CSS 程式碼——我們將為 <div> 新增一個背景影像和一個綠色背景顏色

div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background: url(colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

.multiply {
  background-blend-mode: multiply;
}

我們得到的結果如下——您可以在左側看到原始版本，在右側看到 multiply 混合模式

現在讓我們看一下 mix-blend-mode。在這裡，我們將呈現相同的兩個 <div>，但每個 <div> 現在都位於一個簡單的 <div> 之上，該 <div> 具有紫色背景，以顯示元素如何混合在一起

<article>
  No mix blend mode
  <div></div>
  <div></div>
</article>

<article>
  Multiply mix
  <div class="multiply-mix"></div>
  <div></div>
</article>

以下是我們將使用它進行樣式設定的 CSS 程式碼

article {
  width: 280px;
  height: 180px;
  margin: 10px;
  position: relative;
  display: inline-block;
}

div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
}

article div:first-child {
  position: absolute;
  top: 10px;
  left: 0;
  background: url(colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

article div:last-child {
  background-color: purple;
  position: absolute;
  bottom: -10px;
  right: 0;
  z-index: -1;
}

.multiply-mix {
  mix-blend-mode: multiply;
}

這將給我們以下結果

您在這裡可以看到，multiply 混合模式不僅混合了兩個背景影像，而且還混合了來自其下方 <div> 的顏色。

雖然 CSS 中的所有內容都是一個矩形框，影像也是一個物理矩形框，但我們可以透過使用 CSS 形狀 來使其看起來像我們的內容圍繞著非矩形的東西流動。

CSS 形狀規範支援在非矩形形狀周圍包裹文字。在處理包含一些空白的影像時，這尤其有用，您可能希望將文字圍繞它進行浮動。

在下圖中，我們有一個令人愉悅的圓形氣球。實際檔案是矩形的，但透過浮動影像（形狀僅適用於浮動元素）並使用 shape-outside 屬性，其值為 circle(50%)，我們可以產生文字跟隨氣球線的效果。

此示例中的形狀不會對影像檔案的內容做出反應。相反，circle 函式從影像檔案中心獲取其中心點，就好像我們在檔案中心放了一個指南針並繪製了一個適合檔案內的圓圈。正是這個圓圈使文字圍繞它流動。

circle() 函式只是定義的幾個基本形狀之一，但是有許多不同的方法可以建立形狀。有關 CSS 形狀的更多資訊和示例程式碼，請檢視 MDN 上的 CSS 形狀指南。

另一個我們想簡要提到的功能是 background-clip 的 text 值。當與專有 -webkit-text-fill-color: transparent; 功能一起使用時，這允許您將背景影像剪裁到元素文字的形狀，從而產生一些不錯的效果。這不是官方標準，但在多個瀏覽器中已實現，因為它很流行，並且被開發人員廣泛使用。在這種情況下的使用中，這兩個屬性都需要一個 -webkit- 供應商字首，即使對於非 Webkit/Chrome 基瀏覽器也是如此

.text-clip {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

那麼為什麼其他瀏覽器實現了 -webkit- 字首呢？主要原因是瀏覽器相容性——如此多的 Web 開發人員開始使用 -webkit- 字首來實現網站，以至於其他瀏覽器看起來像是壞了，而實際上他們是在遵循標準。因此，他們被迫實現一些這樣的功能。這突出了在您的工作中使用非標準和/或帶字首的 CSS 功能的危險——它們不僅會導致瀏覽器相容性問題，而且還可能會發生變化，因此您的程式碼隨時可能出現故障。最好堅持使用標準。

如果您確實要在生產工作中使用此類功能，請確保在不同瀏覽器中徹底測試，並檢查在這些功能不起作用的情況下，網站是否仍然可用。

我們希望這篇文章很有趣 - 玩閃亮玩具通常很有趣，而且總是很有趣地看到現代瀏覽器中有哪些高階的樣式工具可以使用。

• 上一篇
• 概述：CSS 構建塊
• 下一篇