css3新特性

1.css3选择器

  我们所定义的 CSS 属性之所以能应用到相应的节点上，就是因为 CSS 选择器模式。参考下述代码：

Body > .mainTabContainer  div  > span[5]{ 
 Border: 1px solod red; 
 Background-color: white; 
 Cursor: pointer; 
 }

1. “body”标签直接子元素里 class 属性值为“mainTabContainer”的所有元素 A

2. A 的后代元素（descendant）里标签为 div 的所有元素 B

3. B 的直接子元素中的第 5 个标签为 span 的元素 C

这个 C 元素（可能为多个）即为选择器定位到的元素，如上的 CSS 属性也会全部应用到 C 元素上。

2.css3盒子模型

盒子模型为开发者提供了一种非常灵活的布局方式，但是支持这一特性的浏览器并不多，目前只有 webkit 内核的新版本 safari 和 chrome 以及 gecko 内核的新版本 firefox。

.boxcontainer { 
                width: 1000px; 
                display: -webkit-box; 
                display: -moz-box; 
                -webkit-box-orient: horizontal; 
                -moz-box-orient: horizontal; 
            } 
            
            .item { 
                background: #357c96; 
                font-weight: bold; 
                margin: 2px; 
                padding: 20px; 
                color: #fff; 
                font-family: Arial, sans-serif; 
            }

3.CSS3 的 Transitions, Transforms 和 Animation Transitions

先说说 Transition，Transition 有下面些具体属性：

transition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指 backgound 参与这个过渡

transition-duration：用于指定这个过渡的持续时间

transition-delay：用于制定延迟过渡的时间

transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

4.其他新属性

边框

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 属性

其它模块

media queries 模块
multi-column layout 模块
Web 字体模块
Speech 模块