CSS3新特性簡介

標籤：css   css3   web開發   html5   

1.CSS3 邊框：通過 CSS3，能夠建立圓角邊框，向矩形添加陰影，使用圖片來繪製邊框，如border-radius；box-shadow；border-image

2.CSS3 背景：CSS3 包含多個新的背景屬性，它們提供了對背景更強大的控制。background-size；background-origin

3.CSS3 文字效果：CSS3 包含多個新的文本特性。text-shadow；word-wrap

4.CSS3 @font-face規則：可將設計師希望使用的字型檔存放到web伺服器上，它會在需要時被自動下載到使用者的電腦上，即可使用任意字型。在新的@font-face規則中，您必須首先定義字型的名稱（比如myFirstFont），然後指向該字型檔。

5.CSS3 轉換：通過 CSS3轉換，我們能夠對元素進行移動、縮放、轉動、拉長或展開。轉換是使元素改變形狀、尺寸和位置的一種效果。您可以使用2D或3D轉換來轉換您的元素。

2D 轉換方法：translate()；rotate()；scale()；skew()；matrix()。Chrome 和 Safari 需要首碼 -webkit-，Internet Explorer 9 需要首碼 -ms-

6.3D 轉換：CSS3 允許您使用 3D 轉換來對元素進行格式化。 3D 轉換方法：rotateX()；rotateY()

Opera 仍然不支援 3D 轉換。

7.CSS3 過渡：通過 CSS3，我們可以在不使用Flash動畫或JavaScript的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。
CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。
要實現這一點，必須規定兩項內容：
規定您希望把效果添加到哪個 CSS 屬性上；

規定效果的時間長度：預設值是 0；

8.CSS3 動畫:通過 CSS3，我們能夠建立動畫，這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
@keyframes規則用於建立動畫。在@keyframes中規定某項CSS樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。
請把它捆綁到某個選取器，否則不會產生動畫效果。
通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選取器：
規定動畫的名稱;

規定動畫的時間長度;

9.CSS3 多列:通過 CSS3，您能夠建立多個列來對文本進行布局 - 就像報紙那樣!column-count;column-gap;column-rule
10.CSS3 使用者介面：在 CSS3 中，新的使用者介面特性包括重設元素尺寸、盒尺寸以及輪廓等。
resize
box-sizing
outline-offset