一、定义和用法
box-shadow 属性向框添加一个或多个阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。
注释:box-shadow 向框添加一个或多个阴影。
该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
二、浏览器支持
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
三、实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3知识之阴影box-shadow</title>
<style>
*{ margin: 0; padding: 0; }
body{ background-color: #f0f0f0; }
div{ width: 200px; height: 200px; margin: 60px 30px; background-color: #35b091;
float: left; border-radius: 16px; text-align: center; line-height: 200px; } /*底部阴影*/
.div1{ box-shadow: 0 6px 3px -3px rgba(0,0,0, 0.8); } /*两侧阴影*/
.div2{ box-shadow: 6px 0px 3px -3px rgba(0,0,0, 0.8),
-6px 0px 3px -3px rgba(0,0,0, 0.8); } /*内阴影*/
.div3{ box-shadow: 0px 0px 6px rgba(0,0,0, 0.8) inset; } /*内侧单边阴影*/
.div4{ box-shadow: 0px -6px 6px -6px rgba(0,0,0, 0.8) inset; } /*内侧双边阴影*/
.div5{ box-shadow: -6px 0px 6px -6px rgba(0,0,0, 0.8) inset ,
0px 6px 6px -6px rgba(0,0,0, 0.8) inset; }
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>
</body>
</html>
四、扩展:在ie下模拟css3中的box-shadow阴影效果
方法一:可以使用IE的Shadow滤镜
基本语法:filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值),Strength=阴影半径(数值));
注意:该滤镜必须配合background属性一起使用,否则该滤镜失效。
.box-shadow{
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135, Strength=5);/*for ie6,7,8*/
background-color: #ccc;
-moz-box-shadow:2px 2px 5px #969696;/*firefox*/
-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
box-shadow:2px 2px 5px #969696;/*opera或ie9*/
}
方法二:有些js和.htc的hack文件可以实现IE中的阴影效果。
ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件,不只是box-shadow,它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。
它的使用方法是:下载它并放到你的服务器目录,在你的<head></head>里面写入下面的代码:
.div1 {
-moz-box-shadow: 10px 10px 20px #000;
-webkit-box-shadow: 10px 10px 20px #000;
box-shadow: 10px 10px 20px #000;
behavior: url(ie-css3.htc);
}
这个脚本的缺点是IE只支持一部分的box-shadow值。
需要注意:
当你使用了这个htc文件后,你的CSS里面,只要写有box-shadow, -moz-box-shadow或-webkit-box-shadow的任何一种,IE就会渲染。
当使用了这个htc文件后,你不能这样写box-shadow: 0 0 10px red; 而应该是box-shadow: 0px 0px 10px red; 否则IE中会失效。
不支持RGBA值中的alpha透明度。
不支持inset内阴影。
不支持阴影扩展。
阴影在IE中只会显示为黑色,不管你设置成其它什么颜色。
方法三:使用jQuery的插件jquery.boxshadow.js
使用方法很简单,将该文件和jquery版本库引入head标签,插入以下js效果代码:
<script type="text/javascript">
$(document).ready(function(){
if($.browser.msie) {
$('.obj').boxShadow(-10,-10,5,"#0cc"); //obj元素使用了box-shadow
}
});
</script>
注意:js中可以使用:obj.style.webkitBoxShadow=值(字符串);obj.style.MozBoxShadow=值(字符串);obj.style.boxShadow=值(字符串);
CSS3阴影演示工具 http://www.css88.com/tool/css3Preview/Box-Shadow.html