快速业务通道

CSS教程:CSS3新功能和新特性

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-25

 



RGBA颜色值
CSS3已经添加了一个颜色赋值的新特性。即RGB之后你现在也可以使用RGBA。这个"A"指的就是你猜测的alpha(透明度)。这个新特性允许我们定义颜色的透明度。它让网页工程师的日子变得轻松许多。
如今,这个特性已经在Safari 3和Firefox 3 pre-alpha中得以实现。
例子:

 

Code:
<div style="background: rgba(255, 0, 0, 0.2);"></div>
<div style="background: rgba(255, 0, 0, 0.4);"></div>
<div style="background: rgba(255, 0, 0, 0.6);"></div>
<div style="background: rgba(255, 0, 0, 0.8);"></div>
<div style="background: rgba(255, 0, 0, 1);"></div>


Text-shadow:用CSS实现类似Photoshop的特效
当我们需要实现一个简单的阴影的时候,CSS3最终消除了我们对Photoshop的需求。text-shadow属性可以被如下方式使用:

 

Code:
text-shadow: 2px 2px 2px #000;

 

 各个参数和box-shadow的参数表意一致。
目前Webkit、Opera 9.5、Firefox 3.1 (pre-Alpha)、Konqueror、iCab已经实现这一特性。
注:这个特性并不是CSS3的新特性,而是CSS2提出的。Safari从第1个版本就有这个特性了。


Text-overflow
有的时候文本不得不被切割。比如当其溢出元素的矩形区域的时候。一旦这样的现象出现,你就需要一个视觉上的暗示,告诉用户文本被截断了。这时我们引入了text-overflow-props。最普遍的方式就是通过省略号来表示文本溢出,如规则中所说,“当前的字符表现可能有所不同”。Opera通过-o-text-overflow支持了这一特性。
支持这些特性现在变得很棘手。Webkit只支持text-overflow的简写方式,且这些特性只是部分实现。text-overflow: ellipsis-word; 和 text-overflow: inherit; 并没有工作。搞笑的是Internet Explorer从IE6开始支持了这

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号