A, box-shadow syntax
box-shadow: none | inset (optional value is not set, an outer projection disposed, within the projection) x-offset (shaded horizontal offset, the positive direction is right) y-offset (vertical offset shadow, positive direction bottom) blur-radius (shadow blur radius is positive, 0 is no blur, the larger the value, the more blurred) spread-radius (radius extended shadow, either positive or negative) Color
Property Value Description:
1. Shadow Type: This parameter is optional, default outer shadow projection; whichever unique value if the "inset", is to become the outer shadows shadow
2.X-offset: offset refers to a shade level, which value can be positive or negative, a positive value, the shadow on the right side of the object, a negative value, the shadow on the left side of the object
3. Y-offset: offset means the vertical shadow, which may be positive or negative values, positive values in the shadow of the bottom of the object, a negative value, a shadow at the top of the object
4. the shadow blur radius: this parameter is optional, can have positive values, if its value is 0, the shadow effect of having no blur, the value large shadow fuzzier edges
5. the shadow extended radius: this optional parameter, whose value may be positive or negative, a positive value, the entire expansion of the shadow are extended, and vice versa, is reduced
6. shadow color: this parameter is optional, when not set any color, the browser will take the default colors, but each color is not the same as the default browser, especially in safari and chrome webkit core browser will colorless, that is transparent, it is recommended not to omit this parameter.
Note: The multi-layer shadow, the innermost layer of the highest priority, followed in descending order. Use a comma "," separated.
Second, the practical application of box-shadow
Example 1: not provided X and Y axes offset setting value 15px shadow blur radius, which radius will play a role, in the color itself.
box-shadow: 0 0 15px #f00;
Renderings:
Example 2: X axis and Y axis is a positive value (the right Y-axis value X axis)
box-shadow:4px 4px 15px #f00;
Example 3: box-shadow: inset i.e. internal shadow box-shadow, writing above the same the only difference is the addition of an ins
box-shadow:0 0 15px #f00 inset;
Renderings:
Example 4: setting the four sides of the square is not the same color, but are shaded blur radius 10px
Shadow-Box: -10px 0px 10px Red, / * left shadow * / 0px 10px -10px Black, / * top shadow * / 10px 0px 10px Green, / * the right shadow * / 0px 10px 10px Blue; " / * lower shadow * /
Renderings:
Having described in the CSS3 box-shadow how to use, box-shadow: inset shadow how internal use, as well as the practical application of box-shadow. As provided around the box-shadow what kind of effect, but also the specific requirements.
Turn: https://www.php.cn/css-tutorial-409654.html