CSS3 Box-shadow

Copy and paste:

<! DOCTYPE HTML > <style type= "Text/css" >
Textarea{display:block; width:500px;height:500px; margin:100px Auto;}
. demo {
border-radius:30%;
Float:left;
margin:20px;
width:100px;
height:50px;
Background: #DEBDC8;
}
. demo1 {
-webkit-box-shadow:6px 6px 6px;
-moz-box-shadow:6px 6px 6px;
box-shadow:6px 6px 6px;
}
. dome2 {
Box-shadow: -8px 0 0 Green,
0-8px 0 Blue,
0 8px 0 Red,
8px 0 0 Yellow;
}
. Demo3 {
Box-shadow: -2px 0 5px green,0-2px 5px blue,0 2px 5px red,2px 0 5px Yellow;
}
/* First shadow blur radius value less than second shadow blur radius */
. demo5 {
box-shadow:0 0 5px red,0 0 15px Blue;
}
/* The first shadow blur radius is greater than the second shadow blur radius */
. demo6 {
box-shadow:0 0 15px Red, 0 0 5px Blue;
}
. Demo7 {
box-shadow:0 0 5px RGB (250,0,0);
}
. demo8 {
box-shadow:0 0 5px Rgba (250,0,0,0.5);
}
. demo9 {
box-shadow:0 0 0 1px red;
}
/* Border Effect */
. demo10 {
border:1px solid red;
}
/* Shadow effect */
. demo11 {
box-shadow:0 0 0 1px red;
}
. demo12 {
border:20px solid red;
}
. demo13 {
box-shadow:0 0 0 20px Red;
}
. demo14 {
Box-shadow:inset 0 0 10px Red;
}

</style><script type= "Text/javascript" >
</script>
<div class= "Demo Demo1" >1</div>
<div class= "Demo Demo2" >2</div>
<div class= "Demo Demo3" >3</div>
<div class= "Demo Demo5" >5</div>
<div class= "Demo Demo6" >6</div>
<div class= "Demo Demo7" >7</div>
<div class= "Demo Demo8" >8</div>
<div class= "Demo Demo9" >9</div>
<div class= "Demo Demo10" >10</div>
<div class= "Demo demo11" >11</div>
<div class= "Demo Demo12" >12</div>
<div class= "Demo Demo13" >13</div>
<div class= "Demo demo14" >14</div>
<textarea style= "" >
Box-shadow and Text-shadow can use one or more projections, and if multiple projections are used, they must be separated by a comma ",".
The Box-shadow property has a maximum of 6 parameter settings, each of which is evaluated:
Shadow type: This parameter is an optional value, and if no value is set, its default projection is an outer shadow, and if its unique value is "inset", the outer shadow becomes an inner shadow, that is, when the shadow type is "inset", its projection is the inner shadow;

X-offset: Refers to the shadow horizontal offset whose value can be positive or negative, if the value is positive, the shadow is on the right side of the object, and the value is negative, the shadow is on the left side of the object;

Y-offset: Refers to the vertical offset of the shadow, its value can also be positive negative, if it is positive, the shadow at the bottom of the object, and conversely its value is negative, the shadow at the top of the object;

Shadow Blur radius: This parameter is optional, but its value can only be positive, and if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the greater the value of the shadow the more blurred the edge;

Shadow expansion radius: This parameter is optional, its value can be positive negative, if the value is positive, then the entire shadow expands, the inverse value is negative, then shrinks

Shadow color: This parameter is optional, if you do not set any color, the browser will take the default color, but the browser default color is different, especially in the WebKit kernel of safari and chrome will be colorless, that is, transparent, it is recommended not to omit this parameter.

WebKit Kernel browser Safari, Google Chrome will not have any shadow effect, although the Internet standard said color is optional, but in the absence of color, Safari/chrome and Firefox performance is different, Shadows appear as transparent in the browser under the WebKit kernel and appear black under Mozilla and Oprea. For this reason, you should not forget to add the shadow color value when using Box-shadow.

IE compatible:
IE Filter Method:
As we have said earlier, IE9 below is not supported CSS3 Box-shadow, but in order to deal with this compatibility problem, we can use the IE Shadow Shadow filter under IE to achieve
Filter:progid:DXImageTransform.Microsoft.Shadow (color= ' color value ', direction= shadow Angle (value), strength= shadow radius (value));

Note: The filter must be used with the background property, otherwise the filter will fail. In addition to the use of filters, we also have a way to achieve the effect of IE. That's the plugin jquery.boxshadow.js that uses jquery. So how do you use it specifically? In fact it's very simple, you first download the Jquery.boxshadow.js plugin into your project, and then load the jquery repository and jquery.boxshadow.js onto the page, as
<script type= "Text/javascript" src= ". /js/jquery.min.js "></script>
<script type= "Text/javascript" src= ". /js/jquery.boxshadow.js "></script>
$ (document). Ready (function () {
if ($.browser.msie) {
$ ('. Demo1 '). Boxshadow (0,0,5, "#888"); The Demo1 element uses the Box-shadow
$ ('. Demo2 '). Boxshadow ( -10,-10,5, "#f36"); The Demo2 element uses the Box-shadow
}
});

</textarea>
</body>

CSS3 Box-shadow