box-shadow

語法:

box-shadow:none | <shadow> [ , <shadow> ]*

<shadow> = inset? && <length>{2,4} && <color>?

預設值none

適用於:所有元素

繼承性:無

動畫性:是,除了內、外陰影切換時

計算值:指定值

媒 體:視覺

取值:

none:
無陰影
<length>1:
第 1 個長度值定義元素的陰影水平偏移值。正值,陰影出現在元素右側;負值,則陰影出現在元素左側
<length>2:
第 2 個長度值定義元素的陰影垂直偏移值。正值,陰影出現在元素底部;負值,則陰影出現在元素頂部
<length>3:
第 3 個長度值定義元素的陰影模糊值半徑(如果提供了)。該值越大陰影邊緣越模糊,若該值為0,陰影邊緣不出現模糊。不允許負值
<length>4:
第 4 個長度值定義元素的陰影外延值(如果提供了)。正值,陰影將向四面增加;負值,則陰影向裡收縮
<color>
定義元素陰影的顏色。如果該值未定義,陰影顏色將預設取目前最近的文字顏色
inset:
定義元素的陰影類型為內陰影。該值為空時,則元素的陰影類型為外陰影

說明:

定義元素的陰影。參閱text-shadow屬性
  • box-shadow可以設定多組陰影效果,每組參數值以逗號分隔。該屬性可以對幾乎所有元素的建立框產生陰影。如果元素同時設定了border-radius,陰影也會有圓角效果。
  • 如果定義了多組陰影效果,它們的 z-ordering 和多個text-shadow規則相同,第一個陰影在最上面,以此類推。
  • 對應的腳本特性為:boxShadow

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 8.0 40.0+ 40.0+ 8.0+ 40.0+ 8.0+ 4.4+ 28.0+
9.0+

示例: