The Box-shadow of CSS3

1. CSS3 Box-shadow

　　CSS3 's Box-shadow property allows us to easily implement layer shading effects

Box-shadow: inset(optional default not) x-offset y-offset blur-radius Spread-radiu s Color

Projection mode x-axis offset y-axis offset shadow blur radius Shadow expansion radius shadow color

Box-shadow and Text-shadow can use one or more projections, and if multiple projections are used, they must be separated by commas ","

　　

Value: Box-shadow property has up to 6 parameter settings

Shadow Type: 　 This parameter is an optional value if you do not set its default projection method is outer shadow, if its unique value "inset", that is, the outer shadow into an inner shadow, that is, when the shadow type is "inset", its projection is the inner shadow;

X-offset: refers to the shadow horizontal offset whose value can be positive or negative, if the value is positive, the shadow is on the right side of the object, and the value is negative, the shadow is on the left side of the object;

y-offset: refers to the vertical offset of the shadow, its value can also be positive negative, if it is positive, the shadow at the bottom of the object, and conversely its value is negative, the shadow at the top of the object;

shadow Blur radius: This parameter is optional, but its value can only be positive, and if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the greater the value of the shadow the more blurred the edge;

Shadow Expansion radius:　 This parameter is optional, its value can be positive negative, if the value is positive, then the entire shadow expands, the inverse value is negative, then shrinks

Shadow color: This parameter is optional, if you do not set any color, the browser will take the default color, but the browser default color is different, especially in the WebKit kernel of safari and chrome will be colorless, that is, transparent, it is recommended not to omit this parameter.

2. Actual Case description

Here Box-shadow is X and Y offset 5px respectively. Notice the fact that the shadow of the Box-shadow just moved from below. You can understand that z-index negative values are slowly coming out.

The degree of ambiguity in the third representation.

If you add inset at this time. Represents an inner projection. He would have projected it in the opposite direction.

　　This is the effect of the inner projection.

Next look at the negative offset effect of X y

You can see here that X is negative to indicate that the object is offset from the left by Y as well. If you add inset, the effect turns into an inner projection. As in the third picture

3. Unilateral effect

　　In fact, there is no order of the four sides of Box-shadow. The style displayed around him is determined by the offset of his own X Y.

4. Four edges have the same shadow effect (only shadow blur radius and shadow color are set)

5. Four-sided with the same shadow (shadow expansion radius and shadow color only set)

　　　　Only one extension radius is set here, just like a border. Note You can use it to implement multiple borders. But if the rectangle inside has a rounded border, it will also produce a rounded corner. If you want to implement an outer border without rounded corners, you can use outline.　

6. Add a shadow to the top of the body

6. CSS3 realization of a round ball

The Box-shadow of CSS3