The CSS box – shadow

Adds a shadow effect to the frame of an element. You can set more than one shadow effect simultaneously

Several properties

The offset offset

  • The shadow of the element is the same size as the element, and is overlapped by default, but only the outside of the element can be seen. In order to see the shadow, you need to move the shadow a little bit.
  • The offset refers to the distance the shadow moves on the X-axis and Y-axis respectively. The coordinate axes refer to top and LETf
  • Without the inset keyword, the value of the offset is simply the value moved along the XY axis
  • I set inset, I switch to the inner shadow, same offset rule, but instead of the original part of the element, I change the shadow to the part outside the element, and then only the part that overlaps the element is displayed

Blur radius blur radius

The distance from clear to fuzzy cannot be negative

Spread radius

By default, the size of the shadow is the same as the size of the element, and the spread radius is used to change the size of the shadow. Spread-radius indicates an increase or decrease in size in four directions.

Color color

Is color

Grammar order

Multiple shadows can be separated by commas

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] [color];
Copy the code

Other supplementary

  • Shadows are not evaluated as content, which means that the parent element does not have a scrollbar for shadows and has no effect on layout
  • The shadow is a box shadow, regardless of the elements inside, the contrast is differentdrop-shadow
  • The size of the shadow is always based on the border-box
  • The sample