How to set border shadow effect in css

In CSS, you can use the box-shadow attribute to add one or more shadows to the border and set the border shadow effect. The syntax format is "box-shadow: horizontal shadow vertical shadow blur radius extended radius shadow color inset "; The inset value is used to change the outer shadow to the inner shadow and can be omitted.

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

In css, you can use the box-shadow attribute to achieve border shadow effects. This property sets the shadow's pixel length, width, and blur distance as well as the shadow's color.

Example:

Rendering:

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

• 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.

css video tutorial)

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