用CSS3将你的设计带入下个高度

10. 盒阴影
box-shadow 属性可以对HTML元素添加阴影 而不用额外的标签或背景图片。类似text-shadow 属性，它增强设计的细节；而且因为它不影响内容的可读性，随意他可以是增加那种额外感觉/效果的一种很好的方法。


10to1 为它的导航背景和hover状态使用了box-shadow 属性.
10to1 为其导航区域增加的一个简单的阴影并将该属性应用于导航链接的hover效果:
#navigation {
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
}
#navigation li a:hover,
#navigation li a:focus {
-webkit-box-shadow: 0 0 5px #111;
-moz-box-shadow: 0 0 5px #111;
}
box-shadow属性可以用多个值：水平偏移、垂直偏移、模糊半径、伸展半径和阴影颜色。水平和垂直偏移和阴影色使用的最多。
在一个div上应用红色阴影，右边和下边偏移4px，无模糊，我们可以使用下面的代码：
div {
-moz-box-shadow: 4px 4px 0 #f00;
-webkit-box-shadow: 4px 4px 0 #f00;
box-shadow: 4px 4px 0 #f00;
}
浏览器支持: box-shadow目前只有Webkit核心浏览器支持，但是即将发布的Firefox 3.5 也将提供很好的支持。 扩展阅读： The ‘box-shadow’ property — W3C Working Draft Box-shadow, one of CSS3’s best new features — CSS3.info Apple’s Navigation bar using only CSS Box Shadow — Surfin’ Safari blog