HTML5移动Web开发指南——6.3.1 box-shadow

box-shadow CSS3的box-shadow属性是让元素具有阴影效果，其语法是： box-shadow:<length> <length> <length> || color; 其中，第一个length值是阴影水平偏移值；第二个length值是阴影垂直偏移值；第三个length值是阴影模糊值。水平和垂直偏移值都可取正负值，如4px或-4px。 目前，box-shadow已经得到Firefox 3.5+、Chrome 2.0+、Safari 4+等现代浏览器的支持。 可是，当我们在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。 从浏览器支持的情况来看，基于Android和iOS的移动Web浏览器也完全支持box-shadow属性。因此，我们在编写CSS样式时可以使用box-shadow属性来修饰移动Web应用程序的界面。 下面代码为使用box-shadow的简单示例，该示例兼容Chrome浏览器、Safari浏览器及Firefox浏览器： <style type="text/css"> div{ /*其他浏览器*/ box-shadow:3px 4px 2px #000; /*webkit浏览器*/ -webkit-box-shadow:3px 4px 2px #000; /*Firefox浏览器*/ -moz-box-shadow:3px 4px 2px #000; padding:5px 4px; } </style>