给文本框设置阴影 box-shadow

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