Detailed examples of how to use the box-shadow property in CSS3

There are many attributes in CSS. Some attributes are easy to forget if they are not used for a long time, especially those attributes that need to set multiple values. For example: box-shadow. Every time I use box-shadow in CSS3, I can’t remember how to use it, and I have to look up information to achieve the corresponding effect. Now let’s summarize how to use box-shadow and the shadow inside box-shadow, so that you can check it later.

1. Box-shadow syntax

box-shadow: none | inset (optional value, if not set, it is external projection, if set, it is internal projection) x-offset (horizontal offset of the shadow, the positive direction is right) y-offset (vertical offset of the shadow, the positive direction is bottom) blur-radius (shadow blur radius, positive, 0 means no blur effect, the larger the value, the blurrier) spread-radius (shadow extension radius, can be positive or negative) color (set the color of the object's shadow)

Property value description:

1. Shadow type: This parameter is optional. The default projection mode is outer shadow. If the only value is "inset", the outer shadow will be changed to inner shadow.

2. X-offset: refers to the horizontal offset of the shadow. Its value can be positive or negative. If it is positive, the shadow is on the right side of the object. If it is negative, the shadow is on the left side of the object.

3. Y-offset: refers to the vertical offset of the shadow. Its value can also be positive or negative. When it is positive, the shadow is at the bottom of the object. When it is negative, the shadow is at the top of the object.

4. Shadow blur radius: This parameter is optional and can only be a positive value. If its value is 0, it means that the shadow has no blur effect. The larger the value, the blurrier the edge of the shadow.

5. Shadow extension radius: This parameter is optional and its value can be positive or negative. If it is positive, the entire shadow will be extended and expanded, otherwise it will be reduced.

6. Shadow color: This parameter is optional. When no color is set, the browser will use the default color. However, the default colors of different browsers are different. In particular, Safari and Chrome browsers under the WebKit kernel will be colorless, that is, transparent. It is recommended not to omit this parameter.

**Note:** For multiple layers of shadows, the innermost layer has the highest priority, and the subsequent layers have lower priority. Use commas "," to separate them.

2. Practical application of box-shadow

Example 1: Without setting the X-axis and Y-axis, setting the shadow blur radius to 15px, it will take effect within the radius and color.

box-shadow: 0 0 15px #f00;

Effect picture:

Example 2: Set the X-axis and Y-axis to positive values ​​(positive value X-axis points to the right and Y-axis points downward)

box-shadow:4px 4px 15px #f00;

Effect picture:

Example 3: box-shadow: inset is the inner shadow of box-shadow. It is the same as above, but with an inset added.

box-shadow:0 0 15px #f00 inset;

Effect picture:

Example 4: Set the colors of the four sides of the square to be different, but the shadow blur radius is 10px

box-shadow:-10px 0px 10px red, / left shadow /

0px -10px 10px black, / top shadow /

10px 0px 10px green, / right shadow /

0px 10px 10px blue;" / bottom shadow / >

Effect picture:

The above introduces how to use box-shadow in CSS3, how to use box-shadow: inset internal shadow, and the practical application of box-shadow. As for what kind of effect is set around box-shadow, it depends on the specific requirements.

This concludes this article about the detailed examples of how to use the box-shadow property in CSS3. For more information about the CSS3 box-shadow property, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!