First, Box-shadow syntax:
Box-shadow:none | Inset (optional value, not set, for outer projection, set as inner projection) X-offset (shadow horizontal offset, positive direction is right) Y-offset (shadow vertical offset, positive direction is bottom) Blur-radius (shadow blur radius, positive, 0 is no blur effect, the larger the value, the more blurry the Spread-radius (shadow expansion radius, can be positive negative) color
Second, explain
- Shadow width:
The Spread-radius mainly controls the size of the shadow, which is the width, and the shadow width of the four edges is determined by the amount of shadow offset.
When there is no shadow offset, only the Spread-radius directly controls the size of the shadow, which is the width.
When there is a horizontal offset, the shadow width of the left and right edges is spread-radius and offset.
When there is a vertical offset, the same can be pushed.
- Inside and outside Shadows:
When the inset is not present, the shadow only behaves outside the box. And the shadow width is determined by the Spread-radius and the shadow offset in the corresponding direction.
When there is a inset, the shadow behaves inside the box. The remaining rules are the same.
- Shadow offset:
X-offset the right direction. Y-offset positive direction for bottom.
When Spread-radius is 0 o'clock, setting the offset can still show shadow, and I understand that the browser automatically fills the gap between the Box-shadow outermost and the border. This can also explain why the shadow width changes after the offset.
- Blur-radius:
The concrete performance rule is unclear, but does not occupy the shadow space. (Because a multilayer shadow is set, it is superimposed with other shadow colors, not squeezed away).
- Multi-Layer Shading:
Highest inner priority, followed by lower.
Box-shadow Comprehensive Analysis
