Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use box-shadow in css3". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use box-shadow in css3.

In css3, the "box-shadow" property is used to add one or more shadows to the box and to style the shadows, with the syntax "box-shadow: horizontal shadows, vertical shadows, blur distance shadows, size shadows change the color of external shadows to internal shadows;"

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the use of box-shadow in css3

Box-shadow: none | inset (optional, not set, external projection, set, 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: no blur effect, larger value) spread-radius (shadow extension radius, positive or negative) color (sets the color of the object's shadow)

Attribute value description:

1. Shadow type: this parameter is optional. The default projection method is outer shadow. If the only value "inset" is taken, the outer shadow is turned into inner shadow.

2. X-offset: refers to the horizontal offset of the shadow. If the value is positive or negative, the shadow is on the right side of the object, the shadow is negative, and 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, positive value, shadow at the bottom of the object, negative value, shadow at the top of the object

4. Shadow blur radius: this parameter is optional and can only be positive. If the value is 0, the shadow does not have a blurring effect. The higher the value, the more blurred the edge of the shadow.

5. Shadow expansion radius: this parameter is optional, its value can be positive or negative, positive value, the whole shadow is extended and enlarged, otherwise, it is reduced

6. Shadow color: this parameter is optional. When no color is set, the browser will default to the color, but the default color will be different for each browser, especially the safari and chrome browsers under the webkit kernel will be colorless, that is, transparent. It is recommended not to omit this parameter.

* * Note: * * Multi-layer shadows, the innermost layer has the highest priority, and then decreases in turn. Separate it with a comma.

Practical Application of box-shadow

Example 1: do not set the X axis and Y axis, set the value shadow blur radius to 15px, it will occur in its own radius range, color.

Box-shadow: 00 15px # f00

Effect picture:

Example 2: X axis and Y axis are set to positive values (positive values X axis right Y axis down)

Box-shadow:4px 4px 15px # f00

Effect picture:

For example, 3:box-shadow:inset is the internal shadow of box-shadow. The only difference is that an inset is added.

Box-shadow:0 0 15px # f00 inset

Effect picture:

At this point, I believe you have a deeper understanding of "how to use box-shadow in css3". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.