CSS3 Box-shadow How to use

We know that in the CSS3 Box-shadow is a box shadow style word, then we will see today Box-shadow how to use, the following to bring a small case column

Box Shadow Style Word: Box-shadow

Grammar

div{box-shadow:0 0 1px #000 inset;}

Represents the border spacing left 0 on top 0 and 1px shadow range shadow color is black (#000), there is inset for the inside of the box, without inset for the outer shadow.

Attention:

box-shadow:0px 0px 1px #000

The 1th value is 0 o'clock, which represents a 1px range for the left and right border shadows

The 1th value is a positive integer representing the left border shadow

The 1th value is a negative integer representing the right border shadow

Similarly

A 2nd value of 0 represents the top and bottom border shadow

The 2nd value is a positive integer representing the 1px shadow distance above the border how much

The 1th value is a negative integer that represents the bottom border shadow setting

Set the inner and outer shadows for the div box and picture img separately for the case.

1. Case HTML code

<! DOCTYPE html> 
2. Case CSS Code

. box {box-shadow:5px 2px 6px #000 inset; width:300px; height:80px; margin:0 auto}. box2 img {box-shadow:5px 2px 6px #000}
CSS3 in the Box-shadow usage is so many, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

What about the overlap between the HTML div?

What is the difference between br,p and div in HTML?

How to use the absolute and relative paths of HTML