浅析CSS3的新功能和新特性.docx

浅析CSS3的新功能和新特性浅析CSS3的新功能和新特性目前很多已经存在的新功能和特性正在被提出至CSS3。于是小编将在此尝试展示其中的一些内容，希望对大家有所帮助。边框border-color属性boder-image属性border-radius属性box-shadow属性背景background-origin属性和background-clip属性background-size属性多重背景颜色HSL颜色值HSLA颜色值opacity属性RGBA颜色值文字效果text-shadow属性text-overflow属性word-wrap属性用户界面box-sizing属性resize属性outline属性nav-top、nav-right、nav-bottom、nav-left属性选择器属性(attribute)选择器基本盒模型overflow-x属性和overflow-y属性生成的内容content属性其它模块mediaqueries模块multi-columnlayout模块Web字体模块Speech模块如何通过CSS3创建彩色的边框W3C已经在CSS3中为边框提供了一些新的选项，这些选项即圆角边框、边框颜色之后，也是非常有趣的。Mozilla/Firefox已经实现了这个允许你创建很酷的彩色边框的函数Border-image：在你的边框中使用图片另一个令人兴奋的CSS3中新的边框特性是border-image属性。有了这个特性你可以定义一个图片以取代普通边框。这个特性实际上可分为一对属性：border-image和border-corner-image。这两个值可以缩写，如下：border-image:border-top-imageborder-right-imageborder-bottom-imageborder-left-imageborder-corner-image:border-top-left-imageborder-top-right-imageborder-bottom-left-imageborder-bottom-right-imageborder-image目前已经在Safari和Firefox3.1(Alpha)下工作了。语法如下：或Border-radius：用CSS创建圆角边框!W3C已经在CSS3中提供了一些新的选项，border-radius是其中之一，Mozilla/Firefox和Safari3都已经实现了这个允许你创建圆角盒模型的函数。例如：-moz-border-radius:5px;-webkit-border-radius:5px;这些不同的角可以被分别控制，代码如下：-moz-border-radius-topleft/-webkit-border-top-left-radius-moz-border-radius-topright/-webkit-border-top-right-radius-moz-border-radius-bottomleft/-webkit-border-bottom-left-radius-moz-border-radius-bottomright/-webkit-border-bottom-right-radiusBox-shadow，CSS3的最牛逼的新特性之一CSS3背景和边框模块拥有一个非常好的新特性名叫box-shadow，它已经在Safari3+和Firefox3.1(Alpha)中得以实现。其规则提及了多重阴影，但是作者已经对此提出了质疑，并且Safari3并没有将其实现。此属性由3个长度参数和一个颜色参数组成，其中长度参数有：1.阴影的横向位移量，正值意味着阴影靠右，负值则靠左;2.阴影的纵向位移量，负值意味着阴影靠上，正值则靠下;3.褪色渐变半径，如果值为0则阴影会被直接切断，值越高褪色渐变的效果就越明显。例如：box-shadow:10px10px5px#888;padding:5px5px5px15px;此阴影会被仅靠圆角边框的圆角而创建，例如：box-shadow:-10px-10px0px#000;border-radius:5px;padding:5px5px5px15px;background-origin和background-clipMozilla、Safari3和Konqueror都已经实验性实现了CSS3中的background-origin属性和background-clip属性。Opera在上一个公开版本中有一个稳定的、基于早期Opera2.3中背景和边框规范的基础实现。background-origin属性用来决定如何在盒模型中计算background-position的值。此属性有三种取值：bor