Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "what is the property of css3 setting shadow to the box". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Css3 sets the shadow property for the box to "box-shadow". This attribute is used to achieve the border shadow effect, apply shadow to the box element, syntax "box-shadow: horizontal shadow vertical shadow blur radius extended radius shadow color projection mode"; if the projection mode is set to "inset" to achieve the inside shadow.

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

Css3 sets the shadow property for the box to "box-shadow".

Box-shadow property-- achieve border shadow effect

The box-shadow property applies shadows to text boxes, setting the pixel length, width and blur distance of shadows in, as well as the color of shadows.

Box-shadow can add shadows to box elements, supporting the addition of one or more.

Box-shadow: X axis offset Y axis offset shadow blur radius shadow extended radius shadow color projection method

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

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

X axis offset and Y axis offset values (horizontal and vertical shadows)

X-axis offset and Y-axis offset values can be set to negative numbers

Shadow blur radius:

This parameter is optional, and the value can only be positive. If the value is 0, the shadow does not have a blurring effect, and the higher the value, the more blurred 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 is extended and enlarged, and when the value is negative, it is reduced.

Example

Div {width: 300px; height: 100px; background:#fff; border: 1px solid # FFC0CB; margin: 50px } .box1 {box-shadow: 10px 10px 5px # 888888 } .box2 {/ * X axis offset is negative * / box-shadow:-10px 10px 5px # 666 } .box3 {/ * Y axis offset is negative * / box-shadow: 10px-10px 5px # 888888 } .box4 {/ * inset changes the outer shadow to the inner shadow * / box-shadow: 10px 10px 10px # 888888 inset;}

This is the end of the content of "which property css3 sets the shadow for the box". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.