An overview of the

  • Box-shadow can be added to the box modelOne or moreShadow;
  • If multiple shadows are set, use the middle oneComma separated;
  • The order of multiple shadows on the Z-axis is as follows: The order of shadows appliedFor front to back, the first shadow is at the top;
  • If the elements are both setborder-radiusProperty, then the shadow will also haveThe rounded effect;

Settable properties

  • X-axis offset (offset-xSet) :The x directionThe shadow offset of;
  • Y-axis offset (offset-ySet) :Y directionThe shadow offset of;
  • Blur radius (blur-radius, optional) : If a blur radius is set, one will be createdThe gradient area, to the surrounding colors;
  • Diffusion radius (spread-radius, optional) : The diffusion radius isScaling of the original solid color shadow. When taking a positive value, the shadow expands; When the value is negative, the shadow shrinks. The default is 0, where the shadow is as large as the element;
  • Color (color, optional) : shadow color;
  • Inner shadow,inset, optional) : If inset is not specified, the default shadow is outside the border, that is, the shadow spreads out.Shadow inwardTo spread.

Fuzzy radius details

  1. When blur() is not setblur: 0px), element size and shadowIt's the same size;
  2. When blur is set to 20px or 40px, the shadow size increases significantly.
  3. The fuzzy area of the shadow is from,The edge of the shadow without blur is extended to both endsAchieve vertical or horizontal blur effect similar to gradient in this area; The transition color range is inFull shadow colorTo its outermost terminustransparentIn between.

As shown in the image above, the second shadow has a blur value of 20px, so the blur area is the center line of the shadow without blur, extending 10px to each side.

Detailed explanation of diffusion radius

The spread radius parameter extends the edge of the shadow directly.

  • When the diffusion radius is 0, the shadow is as large as the element size
  • At a diffusion radius of 10px, the shadow spreads 10px in all directions

Blur radius and diffusion radius are used together

It can be understood as:

  1. Let’s start with the x and y offsetMove shadow position;
  2. And then according to the spread radiusExtended shadow area;
  3. And then blur with this new edge as the standardBlur effect.

Related to recommend

  • Visual shadow generation tool