利用CSS3（box shadow）制作边框投影
应用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> 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中界面如下：
