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

浅析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-image border-right-image border-bottom-image border-left-image border-corner-image: border-top-left-image border-top-right-image border-bottom-left-image border-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-radius Box-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-clip Mozilla、Safari3和Konqueror都已经实验性实现了CSS3中的background-origin属性和background-clip属性。Opera在上一个公开版本中有一个稳定的、基于早期Opera2.3中背景和边框规范的基础实现。 backg