应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果。
最终效果预览
HTML 代码:
<div id="shift">
<h2><a href="http://renniaofei.com/code/css3-box-shadow.html">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中界面如下:
标签:CSS3