What is the attribute of setting shadow for box in css3

The css3 attribute for setting shadows on boxes is "box-shadow". This attribute is used to achieve the border shadow effect and apply the shadow to the box element. The syntax is "box-shadow: Horizontal shadow Vertical shadow Blur radius Expansion radius Shadow color Projection mode"; if the projection mode is set to "inset", inner shadow can be achieved.

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

css3 The attribute that sets the shadow for the box is "box-shadow".

box-shadow property - to achieve border shadow effect

box-shadow property can apply shadow to the text box. Set the shadow's pixel length, width and blur distance as well as the shadow's color.

box-shadow can add shadows to box elements, supporting adding one or more.

box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

Note: The boxShadow property adds one or more drop-down shadows to the box. This property is a comma-separated list of shades, each shade specified by 2-4 length values, an optional color value, and an optional inset keyword. The value for omitted length is 0.

Note: inset can be written in the first or last parameter, and other positions are invalid.

• X-axis offset and Y-axis offset values (horizontal shading and vertical shading)

  X-axis offset and Y-axis offset The axis offset value can be set to a negative number

• Shadow blur radius:

  This parameter is optional and the value can only be positive. If the value is 0, it means that the shadow has no blur effect. The larger the value, the blurr the edge of the shadow.

• Shadow expansion radius:

  This parameter is optional. The value can be positive or negative. If the value is positive, the entire shadow will be extended. Expand, otherwise if the value is negative, reduce it.

Example

(Learning video sharing:css video tutorial、web front end）

The above is the detailed content of What is the attribute of setting shadow for box in css3. For more information, please follow other related articles on the PHP Chinese website!