box-shadow

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

box-shadow 屬性為一個逗號分隔的列表描述一個或多個的陰影效果. 這使的你能夠從幾乎任何元素的框架放入陰影. 如果一個標記了 border-radius 的元素也標記了 box shadow, 這將使得他們有相同的圓邊. 多重 box shadows 的 z-index 排序跟多重 text shadows 一樣(第一個備標記的陰影在最上面).

預設值none
Applies toall elements. It also applies to ::first-letter.
繼承與否no
Computed valueany length made absolute; any specified color computed; otherwise as specified
Animation typea shadow list

Box-shadow 產生器

Interactive tool 可以產生 box-shadow.

表達式

css
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow:
  3px 3px red,
  -1em 0 0.4em olive;

參數

inset

如果未指定(默認),則假定陰影為陰影(就好像該框被提升到內容之上)。 inset 關鍵字的存在將陰影更改為幀內的陰影(就好像內容在框內被壓下)。在邊框內部(甚至是透明的)繪製插入陰影,在背景上方,但在內容下方。

<offset-x> <offset-y>

這兩個 <length> 值用於設置陰影偏移量。 <offset-x>指定水平距離。負值將陰影置於元素的左側。 <offset-y>指定垂直距離。負值將陰影置於元素上方。有關可能的單位,請參見 <length>。 如果兩個值均為 0,則陰影位於元素後面(如果設置了<blur-radius>和/或<spread-radius>,則可能會生成模糊效果)。

<blur-radius>

這是第三個 <length> 值。此值越大,模糊越大,陰影變得越來越大。不允許使用負值。如果未指定,則為 0(陰影邊緣清晰)。

<spread-radius>

這是第四個 <length> 值。正值將導致陰影擴大並變大,負值將導致陰影縮小。如果未指定,則為 0(陰影將與元素的大小相同)。

<color>

有關可能的關鍵字和符號,請參閱 <color> 值。 如果未指定,則使用的顏色取決於瀏覽器 - 它通常是 color 屬性的值,但請注意,Safari 在此情況下當前繪製透明陰影。

語法

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

範例

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
box-shadow: 60px -16px teal;
box-shadow: 10px 5px 5px black;
box-shadow: 3px 3px red, -1em 0 0.4em olive;
box-shadow: inset 5em 1em gold;
box-shadow: 0 0 1em gold;
box-shadow: inset 0 0 1em gold;
box-shadow: inset 0 0 1em gold, 0 0 1em red;

規範

Specification
CSS Backgrounds and Borders Module Level 3
# box-shadow

瀏覽相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
box-shadow
inset
Multiple shadows
Spread radius

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.