CSS implementation Shadow effect (Box-shadow)

Box-shadow How to use

Set Block shadows

Grammar:

Box-shadow:<length> <length> <length> <length>  || <color>

Value:

<length>  <length>  <length>?  <length>? | | <color>:

Shadow horizontal offset value (preferably positive or negative value), Shadow vertical offset value (positive or negative value); shadow blur value; Shadow color

 

Description

Engine Type	Gecko	Webkit	Presto
Box-shadow	-moz-box-shadow	-webkit-border-shadow

In IE, you can use the Filter:shadow to achieve the shadow effect, the same filter can be used multiple times. As the shadow of shadow only two sides have effect, change the angle more than a few times on the line.

. shadow{
width:200px; height:300px; margin:50px Auto;
-moz-box-shadow:0 0 10px #E0E9F0; /* FireFox */
-webkit-box-shadow:0 0 10px #E0E9F0; /* Chrome && Safari */
box-shadow:0 0 10px #E0E9F0; /* Opera */
Filter:progid:DXImageTransform.Microsoft.Shadow (color= #EAF3F9, direction=45,strength=6)
Progid:DXImageTransform.Microsoft.Shadow (color= #EAF3F9, direction=135,strength=6)
Progid:DXImageTransform.Microsoft.Shadow (color= #EAF3F9, direction=225,strength=6)
Progid:DXImageTransform.Microsoft.Shadow (color= #EAF3F9, direction=315,strength=6); /* IE 6.0+ */
}

Inner shadow effect (offset values are positive):

#box-shadow{-moz-box-shadow:5px 5px 5px #999 inset;               /* For Firefox3.6+ */-webkit-box-shadow:5px 5px 5px #999 inset;            /* For Chrome5+, Safari5+ */box-shadow:5px 5px 5px #999 inset;                    /* For Latest Opera */}

Inner Shadow effect (offset value is negative):

#box-shadow2{-moz-box-shadow:-5px -5px 5px #999 inset;             /* For Firefox3.6+ */-webkit-box-shadow:-5px -5px 5px #999 inset;          /* For Chrome5+, Safari5+ */box-shadow:-5px -5px 5px #999 inset;                  /* For Latest Opera */}

Inner shadow effect (horizontal offset is negative, vertical offset is negative):

#box-shadow3{-moz-box-shadow:-5px 5px 5px #999 inset;              /* For Firefox3.6+ */-webkit-box-shadow:-5px 5px 5px #999 inset;           /* For Chrome5+, Safari5+ */box-shadow:-5px 5px 5px #999 inset;                   /* For Latest Opera */}

Inner shadow effect (horizontal offset is positive, vertical offset is negative):

#box-shadow4{-moz-box-shadow:5px -5px 5px #999 inset;              /* For Firefox3.6+ */-webkit-box-shadow:5px -5px 5px #999 inset;           /* For Chrome5+, Safari5+ */box-shadow:5px -5px 5px #999 inset;                   /* For Latest Opera */}

* You can also try to set an offset value to 0, when the shadow effect is only one-sided

CSS implementation Shadow effect (Box-shadow)