标签：
复制粘贴：
<!DOCTYPE html > <html > <head> <meta charset="utf-8"> <title>标题</title> <script type="text/javascript" src="../js/jquery-1.4.min.js"></script>
<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;
}
/*第一个阴影模糊半径值小于第二阴影模糊半径*/
.demo5 {
box-shadow: 0 0 5px red,0 0 15px blue;
}
/*第一个阴影模糊半径大于第二阴影模糊半径*/
.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;
}
/*边框效果*/
.demo10 {
border: 1px solid red;
}
/*阴影效果*/
.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>
</head> <body>
<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和text-shadow一样可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开。
box-shadow属性至多有6个参数设置，他们分别取值：
阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；
Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小
阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
webkit内核的浏览器Safari、Google Chrome里不会有任何阴影效果，虽然W3C标准里说颜色是可选择的，但是在没有给出颜色的时候 ，safari/chrome和firefox表现不同，在webkit内核的浏览器下阴影表现为透明色而mozilla和oprea下表现为黑色。基于这样的原因，大家在使用box-shadow时不要忘了加上阴影颜色的值。
IE兼容：
IE滤镜方法：
在前面我们讲过，IE9以下是不支持CSS3的box-shadow的，但为了处理这个兼容问题，我们可以在IE下使用IE的shadow阴影滤镜来实现
filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）, Strength=阴影半径（数值）);
注意：该滤镜必须配合background属性一起使用，否则该滤镜失效。除了使用滤镜的方法外，我们还有一种方法可以实现IE下的效果。那就是使用jQuery的插件jquery.boxshadow.js。那么具体如何使用呢？其实很简单，你先下载这个jquery.boxshadow.js插件到你的项目中，接着把jquery版本库和jquery.boxshadow.js加载到页面上，如
<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"); //demo1元素使用了box-shadow
$(‘.demo2‘).boxShadow(-10,-10,5,"#f36"); //demo2元素使用了box-shadow
}
});
</textarea>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/vs1435/p/5480774.html
