CSS3

做者原創，轉載請註明出處！

其實CSS3沒什麼難的，若是你已經會了CSS，那它只不過是新增了一些東東而已呀，一塊兒來(｡･∀･)ﾉﾞ嗨呀~~
在這篇文章中我只作大概的總結，具體每個新增的屬性，你去W3School裏具體看就好啦~\(≧▽≦)/~啦啦啦
網址：http://www.w3school.com.cn/css3/

根據W3School整理，並無詳細講解每個新增屬性的用法，可是，你能夠總體瀏覽一下CSS3.

CSS3邊框：

①border-radius：圓角邊框

②box-shadow：邊框陰影（注意：有兩個必選參數，就是水平陰影的位置、垂直陰影的位置，容許爲負值）

③border-image：圖片邊框（注意：border-image是不少個屬性的簡寫哦）

CSS3背景：

①background-size：規定背景圖片的尺寸（要先使用background-image：url(....)引入圖片哦）

②background-origin：規定背景圖片的定位區域（背景圖片能夠放置於 content-box、padding-box 或 border-box 區域，看圖 (◐_◑)）

CSS3文本效果：

①text-shadow：向文本應用陰影

②word-wrap：自動換行（break-word）

CSS3字體：

①@font-face規則：在新的 @font-face 規則中，您必須首先定義字體的名稱（好比 myFirstFont），而後指向該字體文件。如需爲 HTML 元素使用字體，請經過 font-family 屬性來引用字體的名稱 (myFirstFont)

CSS3 2D轉換：經過 CSS3 轉換，咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。

2D 轉換方法：transform有如下屬性值：

• translate()：元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置參數
• rotate()：元素順時針旋轉給定的角度。容許負值，元素將逆時針旋轉。
• scale()：元素的尺寸會增長或減小，根據給定的寬度（X 軸）和高度（Y 軸）參數
• skew()：元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數
• matrix()：matrix() 方法把全部 2D 轉換方法組合在一塊兒。

CSS3 3D轉換：transform有如下屬性值：

rotateX() ：元素圍繞其 X 軸以給定的度數進行旋轉。

rotateY() ：元素圍繞其 Y 軸以給定的度數進行旋轉。

CSS3過渡：經過 CSS3，咱們能夠在不使用 Flash 動畫或 JavaScript 的狀況下，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。

transition屬性：（注意：配合:hover使用，要有過渡時間，和想要過渡屬性的名稱）

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

@keyframes規則：將規則定義在@keyframes裏，使用animation調用定義的名稱。（注意：調用時要指定時間，否則沒有效果哦）

CSS3多列：夠建立多個列來對文本進行佈局 - 就像報紙那樣！

有下多列屬性：

• column-count：規定元素應該被分隔的列數
• column-gap：規定列之間的間隔
• column-rule：規定列之間的寬度、樣式和顏色規則

CSS3用戶界面：在 CSS3 中，新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓等。

用戶界面屬性：

resize：規定是否可由用戶調整元素尺寸。有如下值：

用戶沒法調整元素的尺寸。

• resize：規定是否可由用戶調整元素尺寸。（注意：必須配合overflow:auto 使用纔有效果哦）

  值	描述
  none	用戶沒法調整元素的尺寸。
  both	用戶可調整元素的高度和寬度。
  horizontal	用戶可調整元素的寬度。
  vertical	用戶可調整元素的高度。

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

  三個值：content-box|border-box|inherit;

outline-offset：對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓（配合outline屬性）

            輪廓與邊框有兩點不一樣：

• 輪廓不佔用空間
• 輪廓多是非矩形

舉一枚小栗子（用了不少CSS3屬性）：佈局就是一個<div id='div1'></div>

@font-face {
     font-family:myFont;
     src: url('font/SEGOEPRB.TTF');
 }
 @keyframes myAnimation{
     from{background: greenyellow;}
     to{background: gold;}
 }
  #div1{
      width: 200px;
      height: 200px;
      padding: 20px;
      margin: 200px auto;
      background: greenyellow;
      border:10px solid palevioletred;
      border-radius: 10px 40px;
      box-shadow: 10px 10px 5px deepskyblue;
      background-image: url(img/repeat.png);
      background-repeat: no-repeat;
      background-size: 100%;
      background-origin: content-box;
      font-family: myFont;
      animation: myAnimation 3s;
      transition: font-size 2s,transform 2s;
  }
  #div1:hover{
      font-size: 30px;
      transform: skew(50deg);
  }

基本就是以上這些，作了一個大概的介紹，具體細節請點擊查看。

若有不對的地方，感謝指正，互相學習！