利用CSS3(box shadow)制作边框投影

作者:     目录: PHP+MySQL     发表: 2010年03月01日

应用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> &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.5Webkit 浏览器(例如:Safari和Chrome)上正常显示。

IE不支持此属性,在IE中界面如下:

预览

标签:

♥阿里云服务器♥

云服务器,性价比高,建站首选。

阿里云服务器

♥支付宝现金红包♥

支付宝现金红包,每天可领,红包金额最高 99元,使用无门槛,支付宝扫码付、还信用卡、充话费都可以使用。

支付宝现金红包 每天可领

♥淘宝现金红包♥

淘宝粉丝福利,金额随机,使用无门槛,手机淘宝扫码直接领取现金红包。

淘宝现金红包

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据