#box-shadow

#介绍

box-shadow 属性用于在元件的框架上添加阴影效果，该属性可设置的值包括 X 轴偏移、Y 轴偏移、阴影模糊半径、阴影扩散半径，和阴影颜色，并以多个逗号分隔。box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元件的边框产生阴影。如果元件同时设置了 border-radius，阴影也会有圆角效果。多个阴影在 z 轴的顺序和多个 text shadows 规则相同 (第一个阴影在最上面)。

#使用示例

css-apisrc/box-shadow/App.tsx

Code

预览

#语法

/* Keyword values */
box-shadow: none;

/* 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;

#取值

• 给出两个、三个或四个数字值的情况。
  • 如果只给出两个值, 这两个值将被浏览器解释为 x 轴上的偏移量 <offset-x> 和 y 轴上的偏移量 <offset-y>。
  • 如果给出了第三个值, 这第三个值将被解释为模糊半径的大小 <blur-radius>。
  • 如果给出了第四个值, 这第四个值将被解释为扩展半径的大小 <spread-radius>。
• 可选，插页 (阴影向内) inset。
• 可选，颜色值 <color>。

#形式定义

#形式语法

box-shadow =
  <box-shadow-position> &&
  [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] &&
  <box-shadow-color>

<box-shadow-postion> =
  inset?

<box-shadow-offset> =
  <length>{2}

<box-shadow-blur> =
  <length [0, ∞]>

#与 Web 的区别

• mdn:box-sizing

暂时不支持 inherit、initial、revert、unset、inset 等取值。

#兼容性