box-shadow#

#Introduction

The box-shadow CSS property is used to add a shadow effect on the frame of the element. The values that can be set by this property include X-axis offset, Y-axis offset, shadow blur radius, shadow diffusion radius and shadow color, which are separated by multiple commas. box-shadow describes one or more shadow effects in a comma-separated list. This property allows the borders of almost all elements to be shaded. If the element is set border-radius at the same time, shadows will also have rounded corners. Order of multiple shadows in z-axis is the same rule as multiple text shadows (the first shadow is at the top).

#Syntax

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

#Values

• A case where two, three, or four numeric values are given.

  • If only two values are given, these two values will be interpreted by the browser as an offset on the x-axis<offset-x>AndyOffset on axis<offset-y>。
  • If a third value is given, this third value will be interpreted as the size of the blur radius<blur-radius>。
  • If the fourth value is given, this fourth value will be interpreted as the size of the extended radius<spread-radius>。

• Optional, insert (shadow inward)inset。

• Optional, color value<color>。

#Formal Definition

#Formal Syntax

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, ∞]>

#Difference from Web

• mdn: box-sizing

Temporarily not support values like inherit、initial、revert、unset、inset.

#Compatibility