Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use the box shadow attribute in CSS3". In the daily operation, I believe that many people have doubts about how to use the box shadow attribute in CSS3. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the question of "how to use the box shadow attribute in CSS3". Next, please follow the editor to study!

The box-shadow property adds one or more shadows to the box. Tip: use the border-image-* property to construct a beautiful retractable button!

Boxshadow syntax

Box-shadow:h-shadowv-shadowblurspreadcolorinset

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

Value description test

H-shadow is required. The position of the horizontal shadow. Negative values are allowed. test

V-shadow is required. The position of the vertical shadow. Negative values are allowed. test

Blur is optional. Blur the distance. test

Spread is optional. The size of the shadow. test

Color is optional. The color of the shadow. See CSS color values. test

Inset is optional. Change the outer shadow (outset) to the inner shadow. test

Description of the value of boxshadow:

Inset: the default shadow is outside the border. After using inset, the shadow is in the border (even the transparent border), above the background and below the content. Some people like to put this value last, and browsers also support it.

These are the first two values used to set the shadow offset Sets the horizontal offset, and if it is negative, the shadow is on the left side of the element. Sets the vertical offset, and if it is negative, the shadow is above the element. Please check the available units. If both are 0, then the shadow is behind the element. At this time, if set or, there is a blur effect.

This is the third value. The higher the value, the larger the blur area, and the larger and lighter the shadow. Cannot be negative. The default is 0, and the shadow edges are sharp.

This is the fourth value. When taking a positive value, the shadow expands; when a negative value is taken, the shadow shrinks. The default is 0, and the shadow is as large as the element.

Check related matters. If it is not specified, it is up to the browser to decide-- usually the value of color, but currently Safari is transparent.

At this point, the study on "how to use the box shadow attribute in CSS3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.