css3新增屬性有：word-wrap、word-break、text-shadow、border-radius、box-shadow、border-image、background-size、transform、transition等。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3版、Dell G3電腦。

css3新增屬性

1、CSS3文字效果：

• hanging-punctuation：規(guī)定標(biāo)點(diǎn)字符是否位于線框之外。

• punctuation-trim：規(guī)定是否對標(biāo)點(diǎn)字符進(jìn)行修剪。

• text-align-last：設(shè)置如何對齊最后一行或緊挨著強(qiáng)制換行符之前的行。

• text-emphasis：向元素的文本應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色。

• text-justify：規(guī)定當(dāng) text-align 設(shè)置為 "justify" 時(shí)所使用的對齊方法。

• text-outline：規(guī)定文本的輪廓。

• text-overflow：規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情。

• text-shadow：向文本添加陰影。

• text-wrap：規(guī)定文本的換行規(guī)則。

• word-break：規(guī)定非中日韓文本的換行規(guī)則。

• word-wrap：允許對長的不可分割的單詞進(jìn)行分割并換行到下一行。

2、CSS3邊框：

• border-radius：CSS3圓角邊框。

• box-shadow：用于向方框添加陰影。

• border-image：CSS3邊框圖片，可以使用圖片來創(chuàng)建邊框。

3、CSS3背景：

• background-size：屬性規(guī)定背景圖片的尺寸。

• background-origin：屬性規(guī)定背景圖片的定位區(qū)域。

• background-clip：規(guī)定背景的繪制區(qū)域。

（學(xué)習(xí)視頻分享：css視頻教程）

4、CSS3 轉(zhuǎn)換：

• transform 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。

• transform-origin 允許你改變被轉(zhuǎn)換元素的位置。

• transform-style 規(guī)定被嵌套元素如何在 3D 空間中顯示。

• perspective 規(guī)定 3D 元素的透視效果。

• perspective-origin 規(guī)定 3D 元素的底部位置。

• backface-visibility 定義元素在不面對屏幕時(shí)是否可見。

5、CSS3 過渡：

當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。

• transition：簡寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。

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

• transition-duration：定義過渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。

• transition-timing-function：規(guī)定過渡效果的時(shí)間曲線。默認(rèn)是 "ease"。

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

6、CSS3動(dòng)畫：通過 CSS3，我們能夠創(chuàng)建動(dòng)畫，這可以在許多網(wǎng)頁中取代動(dòng)畫圖片、Flash 動(dòng)畫以及 JavaScript。

• @keyframes：規(guī)定動(dòng)畫。

• animation：所有動(dòng)畫屬性的簡寫屬性，除了 animation-play-state 屬性。

• animation-name：規(guī)定 @keyframes 動(dòng)畫的名稱。

• animation-duration：規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。

• animation-timing-function：規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。

• animation-delay：規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0。

• animation-iteration-count：規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。

• animation-direction：規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。

• animation-play-state：規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"。

• animation-fill-mode：規(guī)定對象動(dòng)畫時(shí)間之外的狀態(tài)。

7、CSS3多列：

• column-count：指定元素應(yīng)該被分割的列數(shù)。

• column-fill：指定如何填充列

• column-gap：指定列與列之間的間隙

• column-rule： 所有 column-rule-* 屬性的簡寫

• column-rule-color：指定兩列間邊框的顏色

• column-rule-style：指定兩列間邊框的樣式

• column-rule-width：指定兩列間邊框的厚度

• column-span：指定元素要跨越多少列

• column-width：指定列的寬度

• columns：設(shè)置 column-width 和 column-count 的簡寫

8、CSS3用戶界面：

• resize：屬性規(guī)定是否可由用戶調(diào)整元素尺寸。

• box-sizing：屬性允許您以確切的方式定義適應(yīng)某個(gè)區(qū)域的具體內(nèi)容。

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

• appearance：允許您使一個(gè)元素的外觀像一個(gè)標(biāo)準(zhǔn)的用戶界面元素。

• icon：為創(chuàng)作者提供了將元素設(shè)置為圖標(biāo)等價(jià)物的能力。

• nav-down：指定在何處使用箭頭向下導(dǎo)航鍵時(shí)進(jìn)行導(dǎo)航。

• nav-index：指定一個(gè)元素的Tab的順序。

• nav-left：指定在何處使用左側(cè)的箭頭導(dǎo)航鍵進(jìn)行導(dǎo)航。

• nav-right：指定在何處使用右側(cè)的箭頭導(dǎo)航鍵進(jìn)行導(dǎo)航。

• nav-up：指定在何處使用箭頭向上導(dǎo)航鍵時(shí)進(jìn)行導(dǎo)航。