選擇器
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:last-child
E:first-of-type
E:only-child
E:only-of-type
E:empty
E:checked
E:enabled
E:disabled
E::selection
E:not(s)
@Font-face
Font-face 可以用來加載字體樣式剂府，而且它還能夠加載服務(wù)器端的字體文件剃盾，讓客戶端顯示客戶端所沒有安裝的字體。
@font-face {
font-family: BorderWeb;
src: url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src: url(RUNICMT0.eot);
}
.border {
FONT-SIZE: 35px;
COLOR: black;
FONT-FAMILY: "BorderWeb"
}
.event {
FONT-SIZE: 110px;
COLOR: black;
FONT-FAMILY: "Runic"
}
聲明的兩個服務(wù)端字體衰伯，其字體源指向“BORDERW0.eot”和“RUNICMT0.eot”文件积蔚，并分別冠以“BorderWeb”和“Runic”的字體名稱。聲明之后读慎，我們就可以在頁面中使用了：“ FONT-FAMILY: "BorderWeb" ” 和 “ FONT-FAMILY: "Runic" ”夭委。
這種做法使得我們在開發(fā)中如果需要使用一些特殊字體募强，而又不確定客戶端是否已安裝時擎值，便可以使用這種方式鸠儿。
Word-wrap & Text-overflow，Text-decoration 樣式
設(shè)置word-wrap: break-word會自動換行
設(shè)置Text-overflow：text-overflow 則設(shè)置或檢索當(dāng)當(dāng)前行超過指定容器的邊界時如何顯示（用來顯示文字超出時的省略號）
設(shè)置Text-decoration：CSS3 里面開始支持對文字的更深層次的渲染（設(shè)置文字內(nèi)部的樣式）
multi-column layout
設(shè)置multi-column layout：可以設(shè)置 CSS3 多列布局
邊框和顏色（color, border）
css3支持rgba
color: rgba(255, 0, 0, 0.75);
background: rgba(0, 0, 255, 0.75);
css3提供圓角
border-radius
css3漸變 Gradient
左上（0% 0%）到右上（0% 100%）即從左到右水平漸變：
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
徑向漸變
關(guān)鍵是徑向漸變（radial）,這不是從一個點到一個點的漸變，而從一個圓到一個圓的漸變品追。
backgroud: -webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));
CSS3 的陰影（Shadow）和反射（Reflect）效果
陰影效果肉瓦，陰影效果既可用于普通元素泞莉，也可用于文字
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
.class2{
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
}
CSS3 的背景效果
CSS3 多出了幾種關(guān)于背景（background）的屬性鲫趁，我們這里會簡單介紹一下：
首先：“Background Clip”挨厚，該屬確定背景畫區(qū)疫剃，有以下幾種可能的屬性：
background-clip: border-box; 背景從 border 開始顯示 ;
background-clip: padding-box; 背景從 padding 開始顯示 ;
background-clip: content-box; 背景顯 content 區(qū)域開始顯示 ;
background-clip: no-clip; 默認屬性巢价，等同于 border-box;
通常情況，我們的背景都是覆蓋整個元素的城菊，現(xiàn)在 CSS3 讓您可以設(shè)置是否一定要這樣做役电。這里您可以設(shè)定背景顏色或圖片的覆蓋范圍。
其次：“Background Origin”法瑟，用于確定背景的位置唁奢，它通常與 background-position 聯(lián)合使用麻掸，您可以從 border脊奋、padding诚隙、content 來計算 background-position（就像 background-clip）久又。
background-origin: border-box; 從 border. 開始計算 background-position;
background-origin: padding-box; 從 padding. 開始計算 background-position;
background-origin: content-box; 從 content. 開始計算 background-position;
還有地消，“Background Size”脉执，常用來調(diào)整背景圖片的大小，注意別和 clip 弄混半夷，這個主要用于設(shè)定圖片本身婆廊。有以下可能的屬性：
background-size: contain; 縮小圖片以適合元素（維持像素長寬比）
background-size: cover; 擴展元素以填補元素（維持像素長寬比）
background-size: 100px 100px; 縮小圖片至指定的大小。
background-size: 50% 100%; 縮小圖片至指定的大小玻熙，百分比是相對包含元素的尺寸否彩。
最后，“Background Break”屬性嗦随，CSS3 中列荔，元素可以被分成幾個獨立的盒子（如使內(nèi)聯(lián)元素 span 跨越多行）敬尺，background-break 屬性用來控制背景怎樣在這些不同的盒子中顯示。
CSS3 的盒子模型
盒子模型為開發(fā)者提供了一種非常靈活的布局方式贴浙，但是支持這一特性的瀏覽器并不多砂吞，目前只有 webkit 內(nèi)核的新版本 safari 和 chrome 以及 gecko 內(nèi)核的新版本 firefox。
display可以設(shè)置box來設(shè)置相關(guān)的盒子模型
.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;
}
注意這里的“display: -webkit-box; display: -moz-box;”崎溃，它針對 webkit 和 gecko 瀏覽器定義了該元素的盒子模型袁串。注意這里的“-webkit-box-orient: horizontal;”赎瑰，他表示水平排列的盒子模型鲜漩。
CSS3 的 Transitions, Transforms 和 Animation
Transition，有下面這些具體屬性：
transition-property：用于指定過渡的性質(zhì)，比如 transition-property:backgrond 就是指 backgound 參與這個過渡
transition-duration：用于指定這個過渡的持續(xù)時間
transition-delay：用于制定延遲過渡的時間
transition-timing-function：用于指定過渡類型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
主要用于偽動作：hover，當(dāng)height，width坊饶，background-color等變化時的效果痘绎。
Transform
再來看看 Transform尔苦，其實就是指拉伸蛾号，壓縮，旋轉(zhuǎn)乐疆，偏移等等一些圖形學(xué)里面的基本變換。
.skew {
-webkit-transform: skew(50deg);
}
.scale {
-webkit-transform: scale(2, 0.5);
}
.rotate {
-webkit-transform: rotate(30deg);
}
.translate {
-webkit-transform: translate(50px, 50px);
}
.all_in_one_transform {
-webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px);
}
“skew”是傾斜咖杂，“scale”是縮放，“rotate”是旋轉(zhuǎn)壤圃，“translate”是平移冲杀。最后需要說明一點，transform 支持綜合變換谨朝。
Animation
Animation洗出，它可以說開辟了 CSS 的新紀元菠镇，讓 CSS 脫離了“靜止”這一約定俗成的前提盔粹。
@-webkit-keyframes anim1 {
0% {
Opacity: 0;
Font-size: 12px;
}
100% {
Opacity: 1;
Font-size: 24px;
}
}
.anim1Div {
-webkit-animation-name: anim1;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
參考資料：深入了解 CSS3 新特性
