CSS 邊框陰影：為您的網頁元素增添深度和維度

你好，有抱負的網頁設計師們！今天，我們將深入探討我喜愛的 CSS 屬性之一：box-shadow。這就像給您的網頁元素施加了神奇的陰影力量！讓我們一起踏上這次陰影的冒險之旅。

Box Shadow 是什麼？

在我們開始之前，想像您手中拿著一張紙。現在，將它稍微從桌子上抬起。看到下面的那個暗區嗎？這就是 CSS 中 box-shadow 的作用——它創造了一種元素浮在頁面上的錯覺。

Box shadow 是一個 CSS 屬性，允許您在元素框架周圍添加陰影效果。這是一種絕佳的方式，為您的網頁設計添加深度、維度和焦點。

Box Shadow 的結構

讓我們分解一下 box-shadow 屬性。它可能起初看起來令人却步，但我保證一旦您了解它，它就像一條友好的黃金獵犬一樣親切！

語法

box-shadow: h-offset v-offset blur spread color;

別擔心，這些現在可能看起來像天書。我們將詳細探討每一部分。

可能的值

這裡是一張包含所有可能的 box-shadow 值的表格：

值	說明	必要？
h-offset	水平偏移的陰影	是
v-offset	垂直偏移的陰影	是
blur	模糊半徑	選填
spread	扩散半徑	選填
color	陰影的顏色	選填
inset	使陰影在框架內部	選填

現在，讓我們詳細看看這些。

h-offset 和 v-offset

這些決定了您的陰影落在哪裡。把它想像成在您的元素上照射手電筒：

• 正數的 h-offset 將陰影向右移動
• 負數的 h-offset 將它向左移動
• 正數的 v-offset 將陰影向下移動
• 負數的 v-offset 將它向上移動

讓我們看一個例子：

.box {
width: 100px;
height: 100px;
background-color: #3498db;
box-shadow: 10px 10px;
}

這會創造一個從我們的盒子右側和下方 10 像素處的陰影。

blur

模糊值會柔化陰影的邊緣。數字越大，模糊程度越高。這是我們如何添加它：

.box {
width: 100px;
height: 100px;
background-color: #3498db;
box-shadow: 10px 10px 5px;
}

這為我們的陰影添加了 5 像素的模糊效果。

spread

扩散值決定了陰影的擴展程度。正值會使陰影變大，而負值會使它變小。讓我們將其添加到我們的例子中：

.box {
width: 100px;
height: 100px;
background-color: #3498db;
box-shadow: 10px 10px 5px 5px;
}

這會使我們的陰影在所有方向上擴展 5 像素。

color

最後，我們可以設定我們陰影的顏色。如果未指定，它會默認為元素當前的顏色。讓我們將我們的陰影設為紅色：

.box {
width: 100px;
height: 100px;
background-color: #3498db;
box-shadow: 10px 10px 5px 5px #e74c3c;
}

应用范围

Box shadow 可以應用於大多數 HTML 元素，但它最常見於 div、圖像和按鈕，以創造深度感或突顯重要的元素。

DOM 語法

如果您在使用 JavaScript，您可以通過 DOM 操作 box-shadow。這是怎麼做的：

document.getElementById("myElement").style.boxShadow = "10px 10px 5px 5px #e74c3c";

這會設定 ID 為 "myElement" 的元素的 box-shadow 屬性。

CSS box-shadow - inset 值

記得上次我提到可選的 'inset' 值嗎？現在是揭開它神秘力量時刻！'inset' 關鍵字將陰影從外部陰影（outset）改為內部陰影。這就像您的元素是被雕刻進頁面而不是浮在它上面。

這是怎麼使用的：

.inset-box {
width: 100px;
height: 100px;
background-color: #3498db;
box-shadow: inset 5px 5px 5px 0px #2980b9;
}

這會創造一個向右和向下 5 像素的內部陰影，並有 5 像素的模糊。

多個陰影

這裡有一個有趣的事實：您可以為單個元素應用多個陰影！只需用逗號分隔每個陰影。例如：

.multi-shadow {
width: 100px;
height: 100px;
background-color: #3498db;
box-shadow:
5px 5px 10px 0px #2980b9,
-5px -5px 10px 0px #e74c3c,
inset 5px 5px 10px 0px #2ecc71;
}

這會創造一個元素，在右下角有一個外部陰影，左上角有一個，並且有一個內部陰影！

結論

就是这样，各位！您剛剛解鎖了 box-shadow 的力量。記住，就像任何超能力一樣，要謹慎使用。一個微妙的陰影可以為您的設計增添優雅，但太多的陰影可能會使您的頁面看起來像被陰影暴風雨困住了！

嘗試不同的值，創造性地組合它們，最重要的是，玩得開心！在您知道之前，您將成為網頁設計的影子大師。下次見，繼續編程，保持陰影狀態！

Credits: Image by storyset