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

This article mainly introduces the relevant knowledge of how to apply box-shadow in css3, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will have something to gain after reading this article on how to apply box-shadow in css3. Let's take a look.

In css3, "box-shadow" means "box shadow" and is a new attribute that adds a border shadow to an element; this attribute can add one or more shadows to a box, and the syntax "box-shadow: horizontal shadow vertical shadow blur distance size color inset;".

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

In css3, "box-shadow" means "box shadow" and is a new attribute that adds border shadows to elements.

The box-shadow property adds one or more shadows to the box.

Note: use the border-image-* property to construct beautiful retractable buttons!

Syntax:

Box-shadow: h-shadow v-shadow blur spread color inset

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.

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

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

Blur is optional. Blur the distance.

Spread is optional. The size of the shadow.

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

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

Here are a few tests I've done for you:

Div {width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px # 888888;}

Running result:

We also demonstrated how to create "polaroid" photos and rotate pictures. For example:

Body {margin:30px; background-color:#E9E9E9;} div.polaroid {width:294px; padding:10px 10px 20px 10px; border:1px solid # BFBFBF; background-color:white; / * Add box-shadow * / box-shadow:2px 2px 3px # aaaaaa;} div.rotate_left {float:left;-ms-transform:rotate (7deg) / * IE 9 * /-webkit-transform:rotate (7deg); / * Safari and Chrome * / transform:rotate (7deg);} div.rotate_right {float:left;-ms-transform:rotate (- 8deg); / * IE 9 * /-webkit-transform:rotate (- 8deg); / * Safari and Chrome * / transform:rotate (- 8deg);}

The pulpit rock in Lysefjorden, Norway.

Monterosso al Mare. One of the five villages in Cinque Terre.

The running results are as follows:

There are many kinds of box-shadow shadows, such as inner shadow, outer shadow, trilateral shadow, bilateral shadow, unilateral shadow, western line stroke,

The representative means:

For example:

Inner shadow example 3 side inner shadow example outer shadow example lower right outer shadow example enlarged shadow example translucent shadow color example

Css:

.flex {display:flex;flex-wrap:wrap;}. Flex-item {margin-right:30px;}. Box {background-color: # CCCCCC; border-radius:10px; width: 200px; height: 200px;} .boxshadow1 {box-shadow:inset 0px 0px 5px 1px # 000;} .boxshadow2 {box-shadow:inset 0 1px 2px 1px # 000;} .boxshadow3 {box-shadow:0 0 10px # 000;} .boxshadow4 {box-shadow:2px 2px 5px # 000;} .boxshadow5 {box-shadow:0 0 5px 15px # 000 } .boxshadow6 {box-shadow: 12px 12px 2px 1px rgba (0,0,255,.2);}

Running result:

This is the end of the article on "how to use box-shadow in css3". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to use box-shadow in css3". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.