box-shadow
box-shadow CSS 屬性用於在元素的框架周圍新增陰影效果。你可以設定多重效果，每層效果之間用逗號分隔。一個盒陰影由相對於元素的 X 和 Y 偏移量、模糊和擴散半徑，以及顏色來描述。
試一試
box-shadow: 10px 5px 5px red;
box-shadow: 60px -16px teal;
box-shadow: 12px 12px 2px 1px rgb(0 0 255 / 0.2);
box-shadow: inset 5em 1em gold;
box-shadow:
3px 3px red,
-1em 0 0.4em olive;
<section id="default-example">
<div class="transition-all" id="example-element">
<p>This is a box with a box-shadow around it.</p>
</div>
</section>
#example-element {
margin: 20px auto;
padding: 0;
border: 2px solid #333333;
width: 80%;
text-align: center;
}
box-shadow 屬性允許你為幾乎任何元素的框架投射下沉陰影。如果在元素上指定了 border-radius，陰影同樣會擁有圓角。多個盒陰影的 z-ordering 與多個文字陰影相同（第一個指定的陰影在最上層）。
盒陰影生成器是一個互動式工具，可以讓你生成 box-shadow。
語法
/* Keyword values */
box-shadow: none;
/* A color and two length values */
/* <color> | <length> | <length> */
box-shadow: red 60px -16px;
/* Three length values and a color */
/* <length> | <length> | <length> | <color> */
box-shadow: 10px 5px 5px black;
/* Four length values and a color */
/* <length> | <length> | <length> | <length> | <color> */
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
/* inset, length values, and a color */
/* <inset> | <length> | <length> | <color> */
box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow:
3px 3px red inset,
-1em 0 0.4em olive;
/* Global values */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: revert-layer;
box-shadow: unset;
使用以下方式指定單個盒陰影：
-
兩個、三個或四個
<length>值。- 如果只給出兩個值，它們將被解析為
<offset-x>和<offset-y>。 - 如果給出第三個值，它將被解析為
<blur-radius>（模糊半徑）。 - 如果給出第四個值，它將被解析為
<spread-radius>（擴散半徑）。
- 如果只給出兩個值，它們將被解析為
-
可選的
inset關鍵字。 -
可選的
<color>值。
要指定多個陰影，請提供一個用逗號分隔的陰影列表。
值
<color>可選<length>-
指定陰影的偏移長度。此引數接受兩個、三個或四個值。第三個和第四個值是可選的。它們的解析方式如下：
-
如果指定了兩個值，它們將被解析為
<offset-x>（水平偏移）和<offset-y>（垂直偏移）。負的<offset-x>值會將陰影置於元素的左側。負的<offset-y>值會將陰影置於元素的上方。
如果未指定，缺失的長度值將使用0。如果<offset-x>和<offset-y>都設為0，陰影將位於元素的正後方（如果設定了<blur-radius>和/或<spread-radius>，可能會產生模糊效果）。 -
如果指定了三個值，第三個值將被解析為
<blur-radius>（模糊半徑）。該值越大，模糊程度越大，陰影也因此變得更大更淺。不允許使用負值。如果未指定，它將被設為0（意味著陰影的邊緣將是銳利的）。規範沒有包含關於如何計算模糊半徑的確切演算法，但它做了如下闡述：……對於一條長而直的陰影邊緣，這應該建立一個顏色過渡，其長度等於模糊距離，垂直於並以陰影邊緣為中心，範圍從陰影內部半徑端點的完整陰影顏色到外部端點的完全透明。
-
如果指定了四個值，第四個值將被解析為
<spread-radius>（擴散半徑）。正值會使陰影擴充套件和變大，負值會使陰影收縮。如果未指定，它將被設為0（即陰影將與元素大小相同）。
-
inset可選-
將陰影從外側盒陰影更改為內側盒陰影（就好像內容被壓入盒子中一樣）。內側陰影繪製在盒子的邊框內部（即使邊框是透明的），並且它們出現在背景之上、內容之下。預設情況下，陰影表現為下沉陰影，給人一種盒子被抬高到其內容之上的感覺。這是在未指定
inset時的預設行為。
插值
在為陰影新增動畫時，例如當盒子上的多個陰影值在懸停時過渡到新值時，這些值會被插值。插值決定了屬性在陰影過渡過程中的中間值，例如模糊半徑、擴散半徑和顏色。對於陰影列表中的每個陰影，顏色、x、y、模糊和擴散都會進行過渡；顏色作為 <color>，其他值作為 <length>。
在兩個逗號分隔的多重盒陰影列表之間進行插值時，陰影會按順序配對，並在配對的陰影之間進行插值。如果陰影列表的長度不同，則較短的列表將在末尾填充陰影，這些陰影的顏色為 transparent，X、Y 和模糊值為 0，inset 狀態與較長的列表匹配。如果在任何一對陰影中，一個設定了 inset 而另一個沒有，則整個陰影列表將無法插值；陰影將直接變為新值，而沒有動畫效果。
正式定義
正式語法
box-shadow =
<spread-shadow>#
<spread-shadow> =
<'box-shadow-color'>? &&
[ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] &&
<'box-shadow-position'>?
<box-shadow-color> =
<color>#
<box-shadow-offset> =
[ none | <length>{2} ]#
<box-shadow-blur> =
<length [0,∞]>#
<box-shadow-spread> =
<length>#
<box-shadow-position> =
[ outset | inset ]#
示例
設定三個陰影
在此示例中，我們包含了三個陰影：一個內陰影、一個常規的下沉陰影，以及一個 tạo出邊框效果的 2px 陰影（對於第三個陰影，我們本可以使用 outline）。
HTML
<blockquote>
<q>
You may shoot me with your words,<br />
You may cut me with your eyes,<br />
You may kill me with your hatefulness,<br />
But still, like air, I'll rise.
</q>
<p>— Maya Angelou</p>
</blockquote>
CSS
blockquote {
padding: 20px;
box-shadow:
inset 0 -3em 3em rgb(0 200 0 / 30%),
0 0 0 2px white,
0.3em 0.3em 1em rgb(200 0 0 / 60%);
}
結果
將偏移和模糊設定為零
當 x-offset、y-offset 和 blur 都為零時，盒陰影將是一個四邊大小相等的純色輪廓。陰影從後向前繪製，因此第一個陰影位於後續陰影的上方。當 border-radius 設定為 0（預設值）時，陰影的角就是直角。如果我們設定了任何其他值的 border-radius，角將會是圓角的。
我們添加了一個與最寬的盒陰影大小相同的 margin，以確保陰影不會與相鄰元素重疊或超出包含框的邊界。盒陰影不影響盒模型的尺寸。
HTML
<div><p>Hello World</p></div>
CSS
p {
box-shadow:
0 0 0 2em #f4aab9,
0 0 0 4em #66ccff;
margin: 4em;
padding: 1em;
}
結果
規範
| 規範 |
|---|
| CSS Backgrounds and Borders Module Level 3 # box-shadow |
瀏覽器相容性
載入中…