text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。
为了兼容各主流浏览器并支持这些主流浏览器的较低版本,在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时,我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。
.box-shadow{
//Firefox4.0-
-webkit-box-shadow: X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;
//Safariand Google chrome10.0-
-moz-box-shadow: X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow: X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;
}
比如我下面的这个box-shadow就是这个效果。
.box-shadow{
-webkit-box-shadow:3px 3px 3px #6B6B6B;
-moz-box-shadow:3px 3px 3px #6B6B6B;
box-shadow:3px 3px 3px #6B6B6B;
}
效果:(背景是蓝色的,哈哈哈)。
这是我看的网上的一个博客写出来的,原博很不错,大家可以看看。链接:http://blog.csdn.net/freshlover/article/details/7610269