h5新增標簽、css3新增屬性

- h6新增的標簽

- css3 
css3被劃分為模塊，最重要的幾個模塊包括：選擇器、框模型、背景和邊框、文本效果、2D/3D 轉換、動畫、多列布局、用戶界面

• 選擇器

• 框模型

• 背景和邊框 
  border-radius、box-shadow、border-image、 
  background-size：規定背景圖片的尺寸 
  background-origin：規定背景圖片的定位區域 
  background-clip：規定背景的繪制區域

• 文本效果（常用） 
  text-shadow：設置文字陰影 
  word-wrap：強制換行 
  word-break 
  css3提出@font-face規則，規則中定義了font-family、font-weight、font-style、font-stretch、src、unicode-range

• 2/3D轉換 
  transform：向元素應用2/3D轉換 
  transition：過渡

• 動畫

• @keyframes規則： 
  animation、animation-name、animation-duration等

• 用戶界面（常用） 
  box-sizing、resize 
  css3新增偽類 
  ：nth-child() 
  ：nth-last-child() 
  ：only-child 
  ：last-child 
  ：nth-of-type() 
  ：only-of-type() 
  ：empty 
  ：target 這個偽類允許我們選擇基于URL的元素，如果這個元素有一個識別器（比如跟著一個#），那么:target會對使用這個ID識別器的元素增加樣式。 
  ：enabled 
  ：disabled 
  ：checked 
  ：not

1.CSS3邊框：

• border-radius：CSS3圓角邊框。在 CSS2 中添加圓角矩形需要技巧，我們必須為每個圓角使用不同的圖片，在 CSS3 中，創建圓角是非常容易的，在 CSS3 中，border-radius 屬性用于創建圓角。border：2px solid;

• box-shadow：CSS3邊框陰影。在 CSS3 中，box-shadow 用于向方框添加陰影。box-shadow:10px 10px 5px #888888;

• border-image：CSS3邊框圖片。通過 CSS3 的 border-image 屬性，您可以使用圖片來創建邊框。border-image：url(border.png) 30 30 round;

　　2.CSS3背景：

• background-size： 屬性規定背景圖片的尺寸。在 CSS3 之前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，可以規定背景圖片的尺寸，這就允許我們在不同的環境中重復使用背景圖片。您能夠以像素或百分比規定尺寸。如果以百分比規定尺寸，那么尺寸相對于父元素的寬度和高度。

• background-origin ：屬性規定背景圖片的定位區域。背景圖片可以放置于 content-box、padding-box 或 border-box 區域。

　　3.CSS3文字效果：

• text-shadow：在 CSS3 中，text-shadow 可向文本應用陰影。text-shadow:5px 5px 5px #FFFFFF;

• word-wrap :單詞太長的話就可能無法超出某個區域，允許對長單詞進行拆分，并換行到下一行：p{word-wrap:break-word;}

　　4.CSS3 2D轉換：

　　transform：通過 CSS3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。

• translate()：元素從其當前位置移動，根據給定的 left（x 坐標） 和 top（y 坐標） 位置參數：transform：translate（50px,100px）;值 translate(50px,100px) 把元素從左側移動 50 像素，從頂端移動 100 像素。

• rotate()：元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。transform:rotate(30deg);值 rotate(30deg) 把元素順時針旋轉 30 度。

• scale():元素的尺寸會增加或減少，根據給定的寬度（X 軸）和高度（Y 軸）參數：transform:scale(2,4);值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍。

• skew():元素轉動給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）參數：transform:skew(30deg,20deg);值 skew(30deg,20deg) 圍繞 X 軸把元素轉動 30 度，圍繞 Y 軸轉動 20 度。

• matrix() :

  matrix() 方法把所有 2D 轉換方法組合在一起。

  matrix() 方法需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素。

　　5.CSS3 3D轉換：

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

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

　　6.CSS3 過渡：當元素從一種樣式變換為另一種樣式時為元素添加效果。

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

　　8.CSS3多列：

• column-count：屬性規定元素應該被分隔的列數。

• column-gap：屬性規定列之間的間隔。

• column-rule ：屬性設置列之間的寬度、樣式和顏色規則。

　　9.CSS3用戶界面：

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

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

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