摘要：和這三個(gè)特性是新增的和動(dòng)畫相關(guān)的特性。使用方式如下和變換類型可以有各種變換類型，即屬性值定義不進(jìn)行轉(zhuǎn)換。設(shè)置列之間的寬度樣式和顏色規(guī)則和和用戶界面中，新的用戶界面特性包括重設(shè)元素尺寸盒尺寸以及輪廓等。

除了html5的新特性，CSS3的新特性也是面試中經(jīng)常被問到的。

CSS3中新添加了很多選擇器，解決了很多之前需要用javascript才能解決的布局問題。

element1~element2: 選擇前面有element1元素的每個(gè)element2元素。

E:first-of-type: 選擇屬于其父元素的首個(gè)E元素的每個(gè)E元素。

E:last-of-type: 選擇屬于其父元素的最后E元素的每個(gè)E元素。

E:only-of-type: 選擇屬于其父元素唯一的E元素的每個(gè)E元素。

E:only-child: 選擇屬于其父元素的唯一子元素的每個(gè)E元素。

E:nth-child(n): 選擇屬于其父元素的第n個(gè)子元素的每個(gè)E元素。

E:nth-last-child(n): 選擇屬于其父元素的倒數(shù)第n個(gè)子元素的每個(gè)E元素。

E:nth-of-type(n): 選擇屬于其父元素第n個(gè)E元素的每個(gè)E元素。

E:nth-last-of-type(n): 選擇屬于其父元素倒數(shù)第n個(gè)E元素的每個(gè)E元素。

E:last-child: 選擇屬于其父元素最后一個(gè)子元素每個(gè)E元素。

:root: 選擇文檔的根元素。

E:empty: 選擇沒有子元素的每個(gè)E元素（包括文本節(jié)點(diǎn))。

E:target: 選擇當(dāng)前活動(dòng)的E元素。

E:enabled: 選擇每個(gè)啟用的E元素。

E:disabled: 選擇每個(gè)禁用的E元素。

E:checked: 選擇每個(gè)被選中的E元素。

E:not(selector): 選擇非selector元素的每個(gè)元素。

E::selection: 選擇被用戶選取的元素部分。

這三個(gè)特性是CSS3新增的和動(dòng)畫相關(guān)的特性。

Transition可以在當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果，而不用使用Flash動(dòng)畫或JavaScript。
Transition有如下屬性：

transition-property: 規(guī)定應(yīng)用過渡的CSS屬性的名稱。

transition-duration: 規(guī)定完成過渡效果需要多長(zhǎng)時(shí)間。

transition-delay: 規(guī)定過渡效果何時(shí)開始，默認(rèn)是0。

transition-timing-function: 規(guī)定過渡效果的時(shí)間曲線，默認(rèn)是"ease"，還有l(wèi)inear、ease-in、ease-out、ease-in-out和cubic-bezier等過渡類型。

transition: 簡(jiǎn)寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。

在一個(gè)例子中使用所有過渡屬性如下：

div {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Firefox 4 */
    -moz-transition-property:width;
    -moz-transition-duration:1s;
    -moz-transition-timing-function:linear;
    -moz-transition-delay:2s;
    /* Safari 和 Chrome */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
    /* Opera */
    -o-transition-property:width;
    -o-transition-duration:1s;
    -o-transition-timing-function:linear;
    -o-transition-delay:2s;
}

使用transition屬性簡(jiǎn)寫如下：

div {
    transition: width 1s linear 2s;
    /* Firefox 4 */
    -moz-transition:width 1s linear 2s;
    /* Safari and Chrome */
    -webkit-transition:width 1s linear 2s;
    /* Opera */
    -o-transition:width 1s linear 2s;
}

Transform用來向元素應(yīng)用各種2D和3D轉(zhuǎn)換，該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜等操作。使用方式如下：

div{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg);     /* IE 9 */
    -moz-transform:rotate(7deg);    /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg);  /* Opera */
}

transform可以有各種變換類型，即屬性值：

none: 定義不進(jìn)行轉(zhuǎn)換。

matrix(n,n,n,n,n,n): 定義2D轉(zhuǎn)換，使用六個(gè)值的矩陣。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 定義3D轉(zhuǎn)換，使用16個(gè)值的4x4矩陣。

translate(x,y): 定義2D位移轉(zhuǎn)換。

translate3d(x,y,z): 定義3D位移轉(zhuǎn)換。

translateX(x): 定義位移轉(zhuǎn)換，只是用X軸的值。

translateY(y): 定義位移轉(zhuǎn)換，只是用Y軸的值。

translateZ(z): 定義3D位移轉(zhuǎn)換，只是用Z軸的值。

scale(x,y): 定義2D縮放轉(zhuǎn)換。

scale3d(x,y,z): 定義3D縮放轉(zhuǎn)換。

scaleX(x): 通過設(shè)置X軸的值來定義縮放轉(zhuǎn)換。

scaleY(y): 通過設(shè)置Y軸的值來定義縮放轉(zhuǎn)換。

scaleZ(z): 通過設(shè)置Z軸的值來定義3D縮放轉(zhuǎn)換。

rotate(angle): 定義2D旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。

rotate3d(x,y,z,angle): 定義3D旋轉(zhuǎn)。

rotateX(angle): 定義沿著X軸的3D旋轉(zhuǎn)。

rotateY(angle): 定義沿著Y軸的3D旋轉(zhuǎn)。

rotateZ(angle): 定義沿著Z軸的3D旋轉(zhuǎn)。

skew(x-angle,y-angle): 定義沿著X和Y軸的2D傾斜轉(zhuǎn)換。

skewX(angle): 定義沿著X軸的2D傾斜轉(zhuǎn)換。

skewY(angle): 定義沿著Y軸的2D傾斜轉(zhuǎn)換。

perspective(n): 為3D轉(zhuǎn)換元素定義透視視圖。

Internet Explorer 10、Firefox、Opera 支持 transform 屬性。
Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉(zhuǎn)換）。
Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉(zhuǎn)換）。
Opera 只支持 2D 轉(zhuǎn)換。

Animation讓CSS擁有了可以制作動(dòng)畫的功能。使用CSS3的Animation制作動(dòng)畫我們可以省去復(fù)雜的js代碼。使用方法大概如下：

@-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 Animation。

CSS3新增了三個(gè)邊框?qū)傩?，分別是border-radius、box-shadow和border-image。border-radius可以創(chuàng)建圓角邊框，box-shadow可以為元素添加陰影，border-image可以使用圖片來繪制邊框。IE9+支持border-radius和box-shadow屬性。Firefox、Chrome以及Safari支持所有新的邊框?qū)傩浴?/p> 背景

CSS3新增了幾個(gè)關(guān)于背景的屬性，分別是background-clip、background-origin、background-size和background-break。

background-clip屬性用于確定背景畫區(qū)，有以下幾種可能的屬性：

background-clip: border-box; 背景從border開始顯示

background-clip: padding-box; 背景從padding開始顯示

background-clip: content-box; 背景顯content區(qū)域開始顯示

background-clip: no-clip; 默認(rèn)屬性，等同于border-box

通常情況，背景都是覆蓋整個(gè)元素的，利用這個(gè)屬性可以設(shè)定背景顏色或圖片的覆蓋范圍。

background-clip屬性用于確定背景的位置，它通常與background-position聯(lián)合使用，可以從 border、padding、content來計(jì)算background-position（就像background-clip）。

background-origin: border-box; 從border開始計(jì)算background-position

background-origin: padding-box; 從padding開始計(jì)算background-position

background-origin: content-box; 從content開始計(jì)算background-position

background-size屬性常用來調(diào)整背景圖片的大小，主要用于設(shè)定圖片本身。有以下可能的屬性：

background-size: contain; 縮小圖片以適合元素（維持像素長(zhǎng)寬比）

background-size: cover; 擴(kuò)展元素以填補(bǔ)元素（維持像素長(zhǎng)寬比）

background-size: 100px 100px; 縮小圖片至指定的大小

background-size: 50% 100%; 縮小圖片至指定的大小，百分比是相對(duì)包 含元素的尺寸

CSS3中，元素可以被分成幾個(gè)獨(dú)立的盒子（如使內(nèi)聯(lián)元素span跨越多行），background-break 屬性用來控制背景怎樣在這些不同的盒子中顯示。

background-break: continuous; 默認(rèn)值。忽略盒之間的距離（也就是像元素沒有分成多個(gè)盒子，依然是一個(gè)整體一樣）

background-break: bounding-box; 把盒之間的距離計(jì)算在內(nèi)；

background-break: each-box; 為每個(gè)盒子多帶帶重繪背景。

CSS3中，word-wrap屬性允許您允許文本強(qiáng)制文本進(jìn)行換行，即這意味著會(huì)對(duì)單詞進(jìn)行拆分。所有主流瀏覽器都支持 word-wrap 屬性。

p {
    word-wrap:break-word;
}

它與word-wrap是協(xié)同工作的，word-wrap設(shè)置或檢索當(dāng)當(dāng)前行超過指定容器的邊界時(shí)是否斷開轉(zhuǎn)行，而 text-overflow則設(shè)置或檢索當(dāng)當(dāng)前行超過指定容器的邊界時(shí)如何顯示。對(duì)于“text-overflow”屬性，有“clip”和“ellipsis”兩種可供選擇。

CSS3中，text-shadow可向文本應(yīng)用陰影。能夠規(guī)定水平陰影、垂直陰影、模糊距離，以及陰影的顏色。

h1{
    text-shadow: 5px 5px 5px #FF0000;
}

CSS3里面開始支持對(duì)文字的更深層次的渲染，具體有三個(gè)屬性可供設(shè)置：

text-fill-color: 設(shè)置文字內(nèi)部填充顏色

text-stroke-color: 設(shè)置文字邊界填充顏色

text-stroke-width: 設(shè)置文字邊界寬度

CSS3新增了漸變效果，包括linear-gradient(線性漸變)和radial-gradient(徑向漸變)。具體用法參考教程：CSS3 Gradient

在CSS3之前，web設(shè)計(jì)師必須使用已在用戶計(jì)算機(jī)上安裝好的字體。通過CSS3，web設(shè)計(jì)師可以使用他們喜歡的任意字體。當(dāng)您您找到或購買到希望使用的字體時(shí)，可將該字體文件存放到web服務(wù)器上，它會(huì)在需要時(shí)被自動(dòng)下載到用戶的計(jì)算機(jī)上。字體是在 CSS3 @font-face 規(guī)則中定義的。Firefox、Chrome、Safari以及Opera支持 .ttf(True Type Fonts)和 .otf(OpenType Fonts)類型的字體。IE9+ 支持新的@font-face規(guī)則，但是僅支持 .eot類型的字體(Embedded OpenType)。

在新的@font-face規(guī)則中，必須首先定義字體的名稱（比如myFont），然后指向該字體文件。
如需為HTML元素使用字體，請(qǐng)通過font-family屬性來引用字體的名稱 (myFont)

@font-face {
    font-family: myFirstFont;
    src: url("Sansation_Light.ttf"),
         url("Sansation_Light.eot"); /* IE9+ */
}
div{
    font-family:myFirstFont;
}

通過CSS3，能夠創(chuàng)建多個(gè)列來對(duì)文本進(jìn)行布局，IE10和Opera支持多列屬性。Firefox 需要前綴-moz-，Chrome和Safari需要前綴-webkit-。主要有如下三個(gè)屬性：

column-count: 規(guī)定元素應(yīng)該被分隔的列數(shù)。

column-gap: 規(guī)定列之間的間隔。

column-rule: 設(shè)置列之間的寬度、樣式和顏色規(guī)則

div{
    -moz-column-count:3;    /* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;
    -moz-column-gap:40px;       /* Firefox */
    -webkit-column-gap:40px;    /* Safari 和 Chrome */
    column-gap:40px;
    -moz-column-rule:3px outset #ff0000;    /* Firefox */
    -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
    column-rule:3px outset #ff0000;
}

CSS3中，新的用戶界面特性包括重設(shè)元素尺寸、盒尺寸以及輪廓等。Firefox、Chrome以及Safari 支持resize屬性。IE、Chrome、Safari以及Opera支持box-sizing屬性。Firefox需要前綴-moz-。
所有主流瀏覽器都支持outline-offset屬性，除了IE。

resize 屬性規(guī)定是否可由用戶調(diào)整元素尺寸。如果希望此屬性生效，需要設(shè)置元素的 overflow 屬性，值可以是 auto、hidden 或 scroll。

div{
    resize:both; /* none|both|horizontal|vertical; */
    overflow:auto;
}

box-sizing屬性可設(shè)置的值有content-box、border-box和inherit。

content-box: padding和border不被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度等于設(shè)置的width值和border、padding之和，即 (Element width = width + border + padding)，此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型。

border-box: padding和border被包含在定義的width和height之內(nèi)。對(duì)象的實(shí)際寬度就等于設(shè)置的width值，即使定義有border和padding也不會(huì)改變對(duì)象的實(shí)際寬度，即 (Element width = width)，此屬性表現(xiàn)為怪異模式下的盒模型。

outline-offset屬性對(duì)輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓。