任鸟飞网页设计

应用CSS3的box shadow属性，可以直接在页面中使用投影，增加页面的立体效果。

最终效果预览

HTML 代码：

<div id="shift">
<h2><a href="http://www.renniaofei.com/code/css3-box-shadow/">CSS3 Box shadow</a></h2>
<blockquote>
<p>任鸟飞网页设计是一个关注于网页设计及网站开发、图形图像设计的专业设计类网站，并提供与网页设计相关的教程、素材、设计技术、设计趋势等...</p>
</blockquote>
<p class="author">更多教程 <a href="http://renniaofei.com"><strong>任鸟飞网页设计</strong> &nbsp; www.renniaofei.com </a></p>
</div> 

CSS3 代码：

box-shadow: 0px 0px 10px rgba(0,0,0,0.3);

代码说明：

box-shadow: 10px 10px 10px rgba(0,0,0,0.3);

box-shadow: 水平方向偏移 垂直方向偏移 扩展 投影颜色及透明度

示例1：水平和垂直方向各偏移10px

box-shadow: 10px 10px 10px rgba(0,0,0,0.3);

示例2：投影颜色为红色

box-shadow: 10px 10px 10px rgba(0,0,0,0.3);

考虑到尽可能兼容更多的浏览器，需将上面代码修改成如下：

-webkit-box-shadow: 10px 10px 10px rgba(255,0,0,0.3);

-moz-box-shadow:10px 10px 10px rgba(255,0,0,0.3);

box-shadow: 10px 10px 10px rgba(255,0,0,0.3);

由于各种类型的浏览器对CSS3的支持情况有差别，上述代码只能在 Firefox 3.5 和 Webkit 浏览器(例如：Safari和Chrome)上正常显示。

IE不支持此属性，在IE中界面如下：

预览