css3新增屬性有哪些

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

本教學操作環境：windows7系統、CSS3版、Dell G3電腦。

css3新增屬性

#1、CSS3文字效果：

• hanging-punctuation：規定標點字元是否位於線框外。
  

• punctuation-trim：規定是否要修剪標點字元。

• text-align-last：設定如何對齊最後一行或緊鄰強制換行符之前的行。

• text-emphasis：向元素的文字應用重點標記以及重點標記的前景色。

• text-justify：規定當 text-align 設定為 "justify" 時所使用的對齊方法。

• text-outline：規定文字的輪廓。

• text-overflow：規定當文字溢出包含元素時發生的事情。

• text-shadow：在文字上新增陰影。

• text-wrap：規定文字的換行規則。

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

• word-wrap：允許將長的不可分割的單字分割並換行到下一行。

2、CSS3邊框：

• #border-radius：CSS3圓角邊框。

• box-shadow：用於在方框中新增陰影。

• border-image：CSS3邊框圖片，可以使用圖片來建立邊框。

3、CSS3背景：

• #background-size：屬性規定背景圖片的尺寸。

• background-origin：屬性規定背景圖片的定位區域。

• background-clip：規定背景的繪製區域。

（學習影片分享：css影片教學）

4、CSS3 轉換：

• transform 向元素套用2D 或3D 轉換。

• transform-origin 允許你改變被轉換元素的位置。

• transform-style 規定被巢狀元素如何在 3D 空間中顯示。

• perspective 規定 3D 元素的透視效果。

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

• backface-visibility 定義元素在不面對螢幕時是否可見。

5、CSS3 轉換：

#當元素從一種樣式變換為另一種樣式時為元素新增效果。

• transition：簡寫屬性，用於在一個屬性中設定四個過渡屬性。

• transition-property：規定套用過渡的 CSS 屬性的名稱。

• transition-duration：定義過渡效果所花費的時間。預設是 0。

• transition-timing-function：規定過渡效果的時間曲線。預設是 "ease"。

• transition-delay：規定過渡效果何時開始。預設是 0。

6、CSS3動畫：透過 CSS3，我們能夠創建動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。

• @keyframes：規定動畫。

• animation：所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。

• animation-name：規定 @keyframes 動畫的名稱。

• animation-duration：規定動畫完成一個週期所花費的秒或毫秒。預設是 0。

• animation-timing-function：規定動畫的速度曲線。預設是 "ease"。

• animation-delay：規定動畫何時開始。預設是 0。

• animation-iteration-count：規定動畫播放的次數。預設是 1。

• animation-direction：規定動畫是否在下一週期逆向播放。預設是 "normal"。

• animation-play-state：規定動畫是否正在運作或暫停。預設是 "running"。

• animation-fill-mode：規定物件動畫時間以外的狀態。

7、CSS3多列：

• #column-count：指定元素應該被分割的列數。

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

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

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

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

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

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

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

• #column-width：指定列的寬度

• columns：設定column-width 和column-count 的簡寫

8、CSS3使用者介面：

• #resize：屬性規定是否可由使用者調整元素尺寸。

• box-sizing：屬性可讓您以確切的方式定義適應某個區域的具體內容。

• outline-offset：屬性會對輪廓偏移，並在超出邊框邊緣的位置繪製輪廓。

• appearance：允許您讓一個元素的外觀像一個標準的使用者介面元素。

• icon：為創作者提供了將元素設定為圖示等價物的能力。

• nav-down：指定在何處使用箭頭向下導覽鍵時進行導覽。

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

• nav-left：指定在何處使用左側的箭頭導覽鍵進行導覽。

• nav-right：指定在何處使用右側的箭頭導覽鍵進行導覽。

• nav-up：指定在何處使用箭頭向上導覽鍵時進行導覽。

更多程式相關知識，請造訪：程式設計影片！ ！

以上是css3新增屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！