box-shadow

<color> 選擇性

指定陰影的顏色。有關可能的關鍵字和表示法，請參見 <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> 。

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 ]#  

在此範例中，我們包含了三個陰影：一個內凹陰影、一個常規的投射陰影，以及一個產生邊框效果的 2px 陰影（我們本可以用 outline 來替代第三個陰影）。

<blockquote>
    你可以用你的話語射擊我，<br />
    你可以用你的眼神切割我，<br />
    你可以用你的仇恨殺死我，<br />
    但我仍會像空氣一樣，升起。
  <p>——瑪雅·安傑洛</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%);