CSS3新增功能

1 CSS3選擇器詳解

1.1 基礎選擇器

• 通配選擇器*
• 元素選擇器E
• ID選擇器#id
• CLASS選擇器.class
• 群組選擇器select1,selectN

1.2 層次選擇器

• 後代選擇器 E F
• 子選擇器 E>F
• 相鄰兄弟選擇器 E+F
• 通用兄弟選擇器 E~F

1.3 屬性選擇器

• E[attr] 選擇具有att屬性的E元素。
• E[attr="val"] 選擇具有att屬性且屬性值等於val的E元素。
• E[attr~="val"] 選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中一個等於val的E元素（包含只有一個值且該值等於val的情況）。
• E[attr^="val"]
  選擇具有att屬性且屬性值為以val開頭的字符串的E元素。
• E[attr$="val"]選擇具有att屬性且屬性值為以val結尾的字符串的E元素。
• E[attr*="val"] 選擇具有att屬性且屬性值為包含val的字符串的E元素。
• E[attr|="val"] 選擇具有att屬性且屬性值為以val開頭並用連接符"-"分隔的字符串的E元素，如果屬性值僅為val，也將被選擇。

1.4 偽類選擇器

動態偽類選擇器

• E:link

    設置超鏈接a在未被訪問前的樣式。 
  

  註意，a:hover 必須位於 a:link 和 a:visited 之後，a:active 必須位於 a:hover 之後

• E:visited

    設置超鏈接a在其鏈接地址已被訪問過時的樣式。 
  

• E:hover

    設置元素在其鼠標懸停時的樣式。 
  

• E:active

    設置元素在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式。
  

• E:focus

    設置對象在成為輸入焦點（該對象的onfocus事件發生）時的樣式。
  

目標偽類選擇器

• E:target

    匹配相關URL指向的E元素。 
  

語言偽類選擇器

• E:lang(fr)

    匹配使用特殊語言的E元素
  

UI元素偽類選擇器

• E:checked

    匹配用戶界面上處於選中狀態的元素E。(用於input type為radio與checkbox時) 
   
  

• E:enabled

    匹配用戶界面上處於可用狀態的表單元素
  

• E:disabled

    匹配用戶界面上處於禁用狀態的表單元素
  

結構偽類選擇器

• E:root

    匹配E元素在文檔的根元素。在HTML中，根元素永遠是HTML 
  

• E:first-child

    匹配父元素的第一個子元素E。 
  

• E:last-child

    匹配父元素的最後一個子元素E。 
  

• E:only-child

    匹配父元素僅有的一個子元素E。
  

• E:nth-child(n)

    匹配父元素的第n個子元素E，假設該子元素不是E，則選擇符無效。
  

• E:nth-last-child(n)

    匹配父元素的倒數第n個子元素E，假設該子元素不是E，則選擇符無效。
  

• E:first-of-type

    匹配同類型中的第一個同級兄弟元素E
  

• E:last-of-type

    匹配同類型中的最後一個同級兄弟元素E
  

• E:only-of-type

    匹配同類型中的唯一的一個同級兄弟元素E
  

• E:nth-of-type(n)

    匹配同類型中的第n個同級兄弟元素E
  

• E:nth-last-of-type(n)

    匹配同類型中的倒數第n個同級兄弟元素E
  

• E:empty

    匹配沒有任何子元素（包括text節點）的元素E
  

否定偽類選擇器

• E:not(s)

    匹配不含有s選擇符的元素E
  

1.5 偽元素選擇器

• E:first-letter/E::first-letter

    設置對象內的第一個字符的樣式。 
  

• E:first-line/E::first-line

    設置對象內的第一行的樣式。
  

• E:before/E::before

    設置在對象前（依據對象樹的邏輯結構）發生的內容。用來和content屬性一起使用
  

• E:after/E::after

    設置在對象後（依據對象樹的邏輯結構）發生的內容。用來和content屬性一起使用
  

• E::placeholder

    設置對象文字占位符的樣式。 
  

• E::selection

    設置對象被選擇時的樣式。 
  

2 CSS3 基本功能

2.1 CSS3新增長度單位

• rem 相對於根元素(即html元素)font-size計算值的倍數
• vm 視口被均分為100單位的vw
• vh 視口被均分為100單位的vh
• vmax 相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax
• vmin 相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin

2.2 CSS3新增顏色單位

• RGBA(R,G,B,A) A：Alpha透明度。取值0~1之間。

• HSL(H,S,L)

  H: Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360

  S：Saturation(飽和度)。取值為：0.0% - 100.0%

  L：Lightness(亮度)。取值為：0.0% - 100.0%

• HSLA(H,S,L,A)

2.3 CSS3漸變(了解)

線性漸變

語法

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

取值

<angle>：用角度值指定漸變的方向（或角度）。
    to left： 設置漸變為從右到左。相當於: 270deg
    to right：設置漸變從左到右。相當於: 90deg
    to top：  設置漸變從下到上。相當於: 0deg
    to bottom： 設置漸變從上到下。相當於: 180deg。這是默認值，等同於留空不寫。
<color-stop> 用於指定漸變的起止顏色：
    <color>：  指定顏色。
    <length>： 用長度值指定起止色位置。不允許負值
    <percentage>： 用百分比指定起止色位置。

示例

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);

徑向漸變

語法

<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

<position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

<shape> = circle | ellipse

<size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]

<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner

<circle-size> = <length>

<ellipse-size> = [ <length> | <percentage> ]{2}

<shape-size> = <length> | <percentage>

<color-stop> = <color> [ <length> | <percentage> ]?

取值

<position> 確定圓心的位置。如果提供2個參數，第一個表示橫坐標，第二個表示縱坐標；如果只提供一個，第二值默認為50%，即center
    <percentage>①：用百分比指定徑向漸變圓心的橫坐標值。可以為負值。
    <length>①：用長度值指定徑向漸變圓心的橫坐標值。可以為負值。
    left：設置左邊為徑向漸變圓心的橫坐標值。
    center①：設置中間為徑向漸變圓心的橫坐標值。
    right：設置右邊為徑向漸變圓心的橫坐標值。
    <percentage>②：用百分比指定徑向漸變圓心的縱坐標值。可以為負值。
    <length>②：用長度值指定徑向漸變圓心的縱坐標值。可以為負值。
    top：設置頂部為徑向漸變圓心的縱坐標值。
    center②：設置中間為徑向漸變圓心的縱坐標值。
    bottom：設置底部為徑向漸變圓心的縱坐標值。

<shape> 確定圓的類型
    circle：指定圓形的徑向漸變
    ellipse：指定橢圓形的徑向漸變。

<extent-keyword> circle | ellipse 都接受該值作為 size
    closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
    closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角
    farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
    farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

<circle-size> circle 接受該值作為 size
    <length>：用長度值指定正圓徑向漸變的半徑長度。不允許負值。

<ellipse-size> ellipse 接受該值作為 size
    <length>：用長度值指定橢圓徑向漸變的橫向或縱向半徑長度。不允許負值。
    <percentage>：用百分比指定橢圓徑向漸變的橫向或縱向半徑長度。不允許負值。

<color-stop> 用於指定漸變的起止顏色：
    <color>：指定顏色。
    <length>：用長度值指定起止色位置。不允許負值
    <percentage>：用百分比指定起止色位置。不允許負值

示例

radial-gradient(circle, #f00, #ff0, #080);
radial-gradient(circle at center, #f00, #ff0, #080);
radial-gradient(circle at 50%, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);

3 CSS3 新增基本屬性

3.1 布局相關屬性

• box-sizing 定義盒子模型的尺寸解析方式

  >content-box(默認)    
  >border-box
  

• resize 否允許用戶縮放，調節元素尺寸大小

  none： 不允許用戶調整元素大小。 (默認)
  both： 用戶可以調節元素的寬度和高度。 
  horizontal： 用戶可以調節元素的寬度     
  vertical： 用戶可以調節元素的高度。
  

• display 盒子是否以及如何顯示

  > none： 隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間 
  > inline： 指定對象為內聯元素。 
  > block： 指定對象為塊元素。 
  > list-item： 指定對象為列表項目。 
  > inline-block： 指定對象為內聯塊元素。（CSS2） 
  > table： 指定對象作為塊元素級的表格。類同於html標簽<table>（CSS2） 
  > inline-table： 指定對象作為內聯元素級的表格。類同於html標簽<table>（CSS2） 
  > table-caption： 指定對象作為表格標題。類同於html標簽<caption>（CSS2） 
  > table-cell： 指定對象作為表格單元格。類同於html標簽<td>（CSS2） 
  > table-row： 指定對象作為表格行。類同於html標簽<tr>（CSS2） 
  > table-row-group： 指定對象作為表格行組。類同於html標簽<tbody>（CSS2） 
  > table-column： 指定對象作為表格列。類同於html標簽<col>（CSS2） 
  > table-column-group： 指定對象作為表格列組顯示。類同於html標簽<colgroup>（CSS2） 
  > table-header-group： 指定對象作為表格標題組。類同於html標簽<thead>（CSS2） 
  > table-footer-group： 指定對象作為表格腳註組。類同於html標簽<tfoot>（CSS2）
  > run-in： 根據上下文決定對象是內聯對象還是塊級對象。（CSS3） 
  > box： 將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3） 
  > inline-box： 將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3） 
  > flexbox： 將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3） 
  > inline-flexbox： 將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3） 
  > flex： 將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3） 
  > inline-flex： 將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
  

  ?

3.2 外輪廓

• outline 給元素周圍繪制一條輪廓線

  <‘ outline-width ‘> || <‘ outline-style ‘> || <‘ outline-color ‘>
  

• outline-width 外廓線寬度

  ： 用長度值來定義輪廓的厚度。不允許負值 medium： 定義默認寬度的輪廓。 thin： 定義比默認寬度細的輪廓。 thick： 定義比默認寬度粗的輪廓。

• outline-style 外廓線風格

  none： 無輪廓。與任何指定的 <‘ outline-width ‘> 值無關 dotted： 點狀輪廓。 dashed： 虛線輪廓。 solid： 實線輪廓 double： 雙線輪廓。兩條單線與其間隔的和等於指定的 <‘ outline-width ‘> 值 groove： 3D凹槽輪廓。 ridge： 3D凸槽輪廓。 inset： 3D凹邊輪廓。 outset： 3D凸邊輪廓。

• outline-color 外廓線顏色

• outline-offset 外廓線的偏移量

3.3 顏色

• opacity 檢索或設置對象的不透明度。 對於尚不支持opacity屬性的IE瀏覽器可以使用IE私有的濾鏡屬性來實現與opacity相同的效果

4 CSS3新增邊框和背景屬性

4.1 邊框圓角

• border-radius

  設置或檢索對象使用圓角邊框。提供2個參數，2個參數以“/”分隔，每個參數允許設置1~4個參數值，第1個參數表示水平半徑，第2個參數表示垂直半徑，如第2個參數省略，則默認等於第1個參數 水平半徑：如果提供全部四個參數值，將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的順序作用於四個角。 如果只提供一個，將用於全部的於四個角。 如果提供兩個，第一個用於上左(top-left)、下右(bottom-right)，第二個用於上右(top-right)、下左(bottom-left)。 如果提供三個，第一個用於上左(top-left)，第二個用於上右(top-right)、下左(bottom-left)，第三個用於下右(bottom-right)。

  垂直半徑也遵循以上4點。

• border-top-left-radius 設置或檢索對象的左上角圓角邊框

• border-top-right-radius 設置或檢索對象的右上角圓角邊框

• border-bottom-right-radius 設置或檢索對象的右下角圓角邊框

• border-bottom-left-radius 設置或檢索對象的左下角圓角邊框

4.2 盒子陰影

• box-shadow 設置元素的陰影

  值: none | [ , ]*
  = inset? && {2,4} && ?

  取值：

  ? none： 無陰影

  <length>①： 第1個長度值用來設置對象的陰影水平偏移值。可以為負值 
  <length>②： 第2個長度值用來設置對象的陰影垂直偏移值。可以為負值 
  <length>③： 如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值 
  <length>④： 如果提供了第4個長度值則用來設置對象的陰影外延值。可以為負值 
  <color>： 設置對象的陰影的顏色。 
  inset： 設置對象的陰影類型為內陰影。該值為空時，則對象的陰影類型為外陰影 
  

  可以設定多組效果，每組參數值以逗號分隔

  test .outset {
      box-shadow: 5px 5px rgba(0, 0, 0, .6);
  }
  .test .outset-blur {
      box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
  }
  .test .outset-extension {
      box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
  }
  .test .inset {
      box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
  }
  .test .multiple-shadow {
      box-shadow:
          0 0 5px 3px rgba(255, 0, 0, .6),
          0 0 5px 6px rgba(0, 182, 0, .6),
          0 0 5px 10px rgba(255, 255, 0, .6);
  }
  

• box-reflect 倒影 （僅webkit 了解）

  值: box-reflect：none | ? ?

  取值：

  direction

  above： 指定倒影在對象的上邊 
  below： 指定倒影在對象的下邊 
  left： 指定倒影在對象的左邊 
  right： 指定倒影在對象的右邊 
  

  offset

  <length>： 用長度值來定義倒影與對象之間的間隔。可以為負值 
  <percentage>： 用百分比來定義倒影與對象之間的間隔。可以為負值 
  

  mask-box-image

  none： 無遮罩圖像 
  <url>： 使用絕對或相對地址指定遮罩圖像。 
  <linear-gradient>： 使用線性漸變創建遮罩圖像。 
  <radial-gradient>： 使用徑向(放射性)漸變創建遮罩圖像。 
  <repeating-linear-gradient>： 使用重復的線性漸變創建背遮罩像。 
  <repeating-radial-gradient>： 使用重復的徑向(放射性)漸變創建遮罩圖像。 
  

4.3 CSS3新增背景屬性

background: bg-image bg-position / bg-size bg-repeat bg-attachment bg-origin bg-clip bg-color

• background-origin 背景圖片原點

  取值：
  padding-box：(默認值) 從padding區域（含padding）開始顯示背景圖像。 
  border-box： 從border區域（含border）開始顯示背景圖像。 
  content-box： 從content區域開始顯示背景圖像。
  

• backgroun-clip 指定對象的背景圖像向外裁剪的區域。

  取值：
  padding-box： 從padding區域（不含padding）開始向外裁剪背景。 
  border-box： (默認值)從border區域（不含border）開始向外裁剪背景。 
  content-box： 從content區域開始向外裁剪背景。 
  text： 從前景內容的形狀（比如文字）作為裁剪區域向外裁剪，如此即可實現使用背景作為填充色之類的遮罩效果
  

• background-size 背景圖像的尺寸

  <length>： 用長度值指定背景圖像大小。不允許負值。 
  <percentage>： 用百分比指定背景圖像大小。不允許負值。 
  auto： 背景圖像的真實大小。 
  cover： 將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。 
  contain： 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。
  

• CSS3多背景

  background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
                url(test1.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
             url(test1.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;
  

4.4 CSS3邊框圖片(了解)

• border-image

  border-image：<‘ border-image-source ‘> || <‘ border-image-slice ‘> [ / <‘ border-image-width ‘> | / <‘ border-image-width ‘>? / <‘ border-image-outset ‘> ]? || <‘ border-image-repeat ‘
  
  復合屬性。設置或檢索對象的邊框樣式使用圖像來填充。
  

• border-image-source 設置或檢索對象的邊框樣式使用圖像路徑。 值: url

• border-image-slice 設置或檢索對象的邊框背景圖的分割方式。 值: 浮點數/百分比

• border-image-width 設置或檢索對象的邊框厚度。值: 長度值/百分比/浮點數

• border-image-outset 設置或檢索對象的邊框背景圖的擴展 值: 長度值/浮點數

• border-image-repeat 設置或檢索對象的邊框圖像的平鋪方式。

  值:
  stretch： 指定用拉伸方式來填充邊框背景圖。 
  repeat： 指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時，如果超過則被截斷。 
  round： 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小直至正好可以鋪滿整個邊框。 
  space： 指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的之間的間距直至正好可以鋪滿整個邊框。
  

5 CSS3變換/過渡/動畫

5.1 變換(transform)

相關屬性

• transform

  設置或檢索對象的轉換。

  取值

  none (默認值)無轉換

  2D Transform Functions：

  matrix()： 以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當於直接應用一個[a,b,c,d,e,f]變換矩陣 
  translate()： 指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值為0 
  translatex()： 指定對象X軸（水平方向）的平移 
  translatey()： 指定對象Y軸（垂直方向）的平移 
  rotate()： 指定對象的2D rotation（2D旋轉），需先有 <‘ transform-origin ‘> 屬性的定義 
  scale()： 指定對象的2D scale（2D縮放）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認取第一個參數的值 
  scalex()： 指定對象X軸的（水平方向）縮放 
  scaley()： 指定對象Y軸的（垂直方向）縮放 
  skew()： 指定對象skew transformation（斜切扭曲）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值為0 
  skewx()： 指定對象X軸的（水平方向）扭曲 
  skewy()： 指定對象Y軸的（垂直方向）扭曲 
  

  3D Transform Functions：

  matrix3d()： 以一個4x4矩陣的形式指定一個3D變換 
  translate3d()： 指定對象的3D位移。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略 
  translatez()： 指定對象Z軸的平移 
  rotate3d()： 指定對象的3D旋轉角度，其中前3個參數分別表示旋轉的方向x,y,z，第4個參數表示旋轉的角度，參數不允許省略 
  rotatex()： 指定對象在x軸上的旋轉角度 
  rotatey()： 指定對象在y軸上的旋轉角度 
  rotatez()： 指定對象在z軸上的旋轉角度 
  scale3d()： 指定對象的3D縮放。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略 
  scalez()： 指定對象的z軸縮放 
  perspective()： 指定透視距離     
  

• transform-origin

  設置或檢索對象以某個原點進行轉換。 用法

  如果提供兩個值，第一個用於橫坐標，第二個用於縱坐標。 
  如果只提供一個，該值將用於橫坐標；縱坐標將默認為50%。 
  3D變形需要制定Z坐標 第三個參數值
  

  取值

  left  right  center   <lenght>  <percentage>
  top bottom  center   <lenght>  <percentage>    
  

• transform-style

  指定某元素的子元素是（看起來）位於三維空間內，還是在該元素所在的平面內被扁平化。 flat： (默認)指定子元素位於此元素所在平面內 preserve-3d： 指定子元素定位在三維空間內

• perspective

  指定觀察者與「z=0」平面的距離，使具有三維位置變換的元素產生透視效果。「z>0」的三維元素比正常大，而「z<0」時則比正常小，大小程度由該屬性的值決定。

  none： 不指定透視 ： 指定觀察者距離「z=0」平面的距離，為元素及其內容應用透視變換。不允許負值

• perspective-origin

  設置透視點的位置

  用法

  ? 該屬性提供2個參數值。

  如果提供兩個，第一個用於橫坐標，第二個用於縱坐標。 
  如果只提供一個，該值將用於橫坐標；縱坐標將默認為center。 
  

  取值

  left  right  center   <lenght>  <percentage>
  top bottom  center   <lenght>  <percentage>    
  

• backface-visibility

  指定元素背面面向用戶時是否可見。 決定一個元素背面面向用戶時是否可見，需要直接在該元素上定義 <‘ backface-visibility ‘> 屬性，而不能在其父元素上，因為該屬性默認為不可繼承。 取值

  visible： (默認)指定元素背面可見，允許顯示正面的鏡像。 
  hidden： 指定元素背面不可見 
  

2D變換

2D位移

• translate(x, y)
• translatex()
• translatey()

2D縮放

• scale(x, y)
• scalex()
• scaley()

2D旋轉

• rotate(deg)

2D傾斜

• skew(x,y)
• skewx()
• skewy()

2D矩陣

• matrix()

3D變換

3D位移

• translate3d(x, y, z)
• translatez()

3D縮放

• scale3d()
• scalez()

3D旋轉

• rotate3d(x, y, z, a)
• rotatex()
• rotatey()
• rotatex()

3D矩陣

• matrix3d()

多重變形

-webkit-transform:translate(-50%, -50%) rotate(45deg);
-moz-transform:translate(-50%, -50%) rotate(45deg);
-ms-transform:translate(-50%, -50%) rotate(45deg);
-o-transform:translate(-50%, -50%) rotate(45deg);
transform:translate(-50%, -50%) rotate(45deg);

5.2 過渡(transition)

過渡相關屬性

• transition 檢索或設置對象變換時的過渡。

  註意：

  如果只提供一個參數，則為 <‘ transition-duration ‘> 的值定義；如果提供二個參數，則第一個為 <‘ transition-duration ‘> 的值定義，第二個為 <‘ transition-delay ‘> 的值定義

  用法 transition：[,]* = [ none | ] || || ||

• transition-property 設置對象中的參與過渡的屬性

  默認值為：all。默認為所有可以進行過渡的css屬性。 如果提供多個屬性值，以逗號進行分隔。 取值

  none： 不指定過渡的css屬性 
  all： 所有可以進行過渡的css屬性 
  <IDENT>： 指定要進行過渡的css屬性 
  

  那些CSS屬性可以被過渡

  顏色屬性
  具有長度值 百分比的屬性
  值是數字的屬性 如 z-index  opacity  outline-offset等
  變形系列屬性
  陰影
  漸變        
  

• transition-duration 設置對象過渡的持續時間

  如果提供多個屬性值，以逗號進行分隔。

• transition-timing-function 設置對象中過渡的動畫類型

  取值
  ease： 平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0) linear： 線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0) ease-in： 由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0) ease-out： 由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0) ease-in-out： 由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0) cubic-bezier(, , , )： 特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內 http://cubic-bezier.com/ steps([, [ start | end ] ]?)： 接受兩個參數的步進函數。第一個參數必須為正整數，指定函數的步數。第二個參數取值可以是start或end，指定每一步的值發生變化的時間點。第二個參數是可選的，默認值為end。

• transition-delay 設置對象延遲過渡的時間

CSS3觸發過渡的條件

• 偽元素觸發
• 媒體查詢
• JavaScript觸發

5.3 動畫

關鍵幀

幀——就是動畫中最小單位的單幅影像畫面，相當於電影膠片上的每一格鏡頭。

關鍵幀語法

@keyframes { }

：[ [ from | to | ]{ sRules } ][ [ , from | to | ]{ sRules } ]*

@keyframes testanimations {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes testanimations {
    from { transform: translate(0, 0); }
    20% { transform: translate(20px, 20px); }
    40% { transform: translate(40px, 0); }
    60% { transform: translate(60px, 20); }
    80% { transform: translate(80px, 0); }
    to { transform: translate(100px, 20px); }
}

@keyframes testanimations{
    0% { transform: translate(0, 0); }
    20% { transform: translate(20px, 20px); }
    40% { transform: translate(40px, 0); }
    60% { transform: translate(60px, 20px); }
    80% { transform: translate(80px, 0); }
    100% { transform: translate(100px, 20px); }
}

相關屬性

• animation 設置對象所應用的動畫特效

  如果提供多組屬性值，以逗號進行分隔。

  註意：如果只提供一個參數，則為 <‘ animation-duration ‘> 的值定義；如果提供二個參數，則第一個為 <‘ animation-duration ‘> 的值定義，第二個為 <‘ animation-delay ‘> 的值定義

  用法

  animation： <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>    
  

• animation-name 設置對象所應用的動畫名稱

  必須與規則@keyframes配合使用，因為動畫名稱由@keyframes定義

• animation-duration 設置對象動畫的持續時間

• animation-timing-function 設置對象動畫的過渡類型

  ease： (默認)平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0) linear： 線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0) ease-in： 由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0) ease-out： 由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0) ease-in-out： 由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0) step-start： 等同於 steps(1, start) step-end： 等同於 steps(1, end) steps([, [ start | end ] ]?)： 接受兩個參數的步進函數。第一個參數必須為正整數，指定函數的步數。第二個參數取值可以是start或end，指定每一步的值發生變化的時間點。第二個參數是可選的，默認值為end。 cubic-bezier(, , , )： 特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內

• animation-delay 指定對象動畫的延遲時間

• animation-iteration-count 指定動畫的具體循環次數

  number:動畫循環次數 infinite： 無限循環

• animation-direction 設置對象動畫在循環中是否反向運動

  normal： 正常方向 (默認) reverse： 反方向運行 alternate： 動畫先正常運行再反方向運行，並持續交替運行 alternate-reverse： 動畫先反運行再正方向運行，並持續交替運行

• animation-play-state 設置對象動畫的狀態

  running： 運動 (默認) paused： 暫停

• animation-fill-mode 設置對象動畫時間之外的狀態

  none 默認值。動畫在動畫執行之前和之後不會應用任何樣式到目標元素。 forwards 在動畫結束後（由 animation-iteration-count 決定），動畫將應用該屬性值。 backwards 動畫將應用在 animation-delay 定義期間啟動動畫的第一次叠代的關鍵幀中定義的屬性值。這些都是from 關鍵幀中的值（當 animation-direction 為 "normal" 或 "alternate" 時）或 to 關鍵幀中的值（當 animation-direction 為 "reverse" 或 "alternate-reverse" 時）。 both 動畫遵循 forwards 和 backwards 的規則。也就是說，動畫會在兩個方向上擴展動畫屬性。

?

6 CSS3嵌入WEB字體

6.1 什麽是@font-face

• 可以把字體放置在服務器上,而不受制於客戶端系統字體
• 瀏覽器會根據指定的命令將對應的字體下載到本地緩存
• 1998年@font-face加入到css2中, 但css2.1中又被移出,css3重新加入
• IE兼容性極好

6.2 @font-face語法

格式

@font-face { 
    font-family: <identifier>; 
    src: <fontsrc> [<string>] [, <fontsrc> [<string>]]*; 
    [<font>];
 }

相關參數

• identifier 字體名稱

• url 此值指的是你自定義的字體的存放路徑，可以是相對路徑也可以是絕路徑

• string 字體的格式，主要用來幫助瀏覽器識別, format(fontType)

  truetype .ttf

  Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+ IE9+
  

  opentype .otf

  Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+
  

  Web Open Font Format .woff

  Firefox 3.5+ Chrome 6+ Safari 3.6+ Opera 11.1+ IE9+
  

  embedded Open Type .eot

  IE4+
  

  svg .svg

  Chrome 4+ Safari 3.1 + Opera 10+ IOS Mobile Safari 3.2+    
  

• font 定義字體相關樣式

  font-weight
  font-style
  font-size
  font-variant

  font-stretch

兼容性處理

@font-face {
    font-family: ‘diyfont‘;
    src: url(‘diyfont.eot‘); /* IE9兼容模式 */
    src: url(‘diyfont.eot?#iefix‘) format(‘embedded-opentype‘), /* IE9 - */
         url(‘diyfont.woff‘) format(‘woff‘), /* chrome、firefox opera  safari  IE9+ 最佳格式 */
         url(‘diyfont.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ IE9+*/
         url(‘diyfont.svg#fontname‘) format(‘svg‘); /* iOS 4.1- */
}

6.3 字體工具

web字體定制

• http://www.iconfont.cn/webfont/#!/webfont/index 阿裏Web字體
• http://www.youziku.com/ 字體庫網站

web字體轉換

• https://www.fontsquirrel.com/tools/webfont-generator FontSquirrel在線工具

6.4 使用字體圖標

使用字體圖標的優勢

• 相比位圖更加清晰
• 靈活性高，更方便改變大小、顏色、風格等
• 兼容性好，低版本IE也支持

常用的字體圖標庫

• 阿裏圖標 http://www.iconfont.cn/

• Font Awesome http://fontawesome.dashgame.com/

• Glyphicons Halfings http://glyphicons.com/

• 字體圖標制作工具

  http://icomoon.io/app/#/select

  http://www.iconfont.cn/help/iconmake.html 阿裏圖標

css3新增功能