How to set border shadow in css

The box-shadow attribute can be used in css to set the border shadow; this attribute adds one or more shadows to the border, and can set the pixel length, width, blur distance and color of the shadow; the syntax "box-shadow:h- shadow v-shadow blur spread color inset”.

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

In CSS, we can set the border shadow through the box-shadow property and apply the shadow to the text box. This property sets the shadow's pixel length, width, and blur distance as well as the shadow's color.

The box-shadow property can add one or more shadows to the box. This property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color value, and the optional inset keyword. The value for omitted length is 0.

Syntax:

box-shadow: h-shadow v-shadow blur spread color inset;

Attribute value:

• h-shadow: refers to the shadow horizontal offset, its value can be positive or negative, positive Value, the shadow is on the right side of the object, negative value, the shadow is on the left side of the object

• v-shadow: refers to the vertical offset of the shadow, and its value can also be positive or negative. , a positive value, the shadow is at the bottom of the object, a negative value, the shadow is at the top of the object

• blur: shadow blur radius; this parameter is optional and can only be positive if When its value is 0, it means that the shadow has no blur effect. The larger the value, the blurr the edge of the shadow.

• spread: shadow expansion radius; this parameter is optional, and its value can be positive Negative value, positive value, the entire shadow will be expanded, otherwise, it will be reduced.

• color: shadow color; this parameter is optional. When no color is set, the browser will choose The default color, but the default color of each browser is different, especially the safari and chrome browsers under the webkit kernel will be colorless, that is, transparent. It is recommended not to omit this parameter

• inset : Sets the inner shadow to change the shadow from the outer shadow (at the beginning); optional value, can be omitted.

Note: **Multiple layers of shadows, the innermost layer has the highest priority, and then decreases in sequence.

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 have an effect within the radius range of itself, color

box-shadow: 0 0 15px #f00;

Example 2

Set the X-axis and Y-axis to positive values (The positive value of the X axis is to the right and the Y axis is downward)

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

Example 3

box-shadow: inset is the internal shadow of the box-shadow, which is the same as the above writing. The difference is that an inset

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

is added. 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, /*左边阴影*/ 0px -10px 10px black, /*上边阴影*/ 10px 0px 10px green, /*右边阴影*/ 0px 10px 10px blue;" /*下边阴影*/ >

（Learning video sharing:css video tutorial）

The above is the detailed content of How to set border shadow in css. For more information, please follow other related articles on the PHP Chinese website!