1.CSS3的發展及特點：

2.CSS3新增的選擇器：

    2.1屬性選擇器：

  2.2偽類選擇器：

   2.3 序列選擇器：

       同級別： 

                first-child:選定同級別中的第一個

                last-child:選定同級別中的最後一個

                nth-child(n):選定同級別中的順數第幾個

                nth-last-child(n):選定同級別中的倒數第幾個

                only-child:選中父元素中唯一的標籤

       同類型：

               first-of-type:選定同類型的第一個

               last-of-type:選定同類型的最後一個

               nth-last-of-type(n):選定同類型的倒數第幾個

               nth-of-type(n):選定同類型的順數第幾個

               only-of-type:選定父元素中唯一的標籤

   2.4 其它選擇器：

              否定選擇器：語法為：標籤:not;

                  例子為：input:not([type=”submit”]),表示的是否定submit按鈕的操作。

              根元素選擇器：語法為：root；

                   例子為：:root{background:green},表示將文件整個背景設定為綠色。

              層次選擇器：(1)後代選擇器：E F

                                    (2)子元素選擇器：E>F

                                    (3)相鄰兄弟選擇器：E+F:若兩者中間存在間隔則匹配不成功

                                    (4)通用兄弟選擇器：E~F：無論兩者是否存在間隔都匹配成功

3.CSS3新增屬性：

       3.1邊框：

             邊框陰影：｛box-shadow：h-shadow v-shadow blur color insert/outset｝

             圓角邊框：｛border-radius：none/value｝

             邊框圖片：｛border-image：url width repeat｝

       3.2背景:

             設定背景圖片大小：{background-size:value1 value2}

             指定背景圖位置區域：{background-origin:value}

             背景圖裁剪：{background-clip:value}

       3.3 文字效果：

              文字陰影：{text-shadow:h-shadow v-shadow blur color}

              英文換行：{word-wrap:keep-all/break/all;}

       3.4 2D Transform:

               位置移動：{translate(橫座標 縱座標);}

               元素旋轉：{rotate(度數);}

               元素尺寸變化：{scale(x y);}

               元素翻轉：{skew(x y);}

       3.5 3D效果：

               rotateX():該方法是使元素圍繞x軸以給定的度數進行旋轉。

               rotateY():該方法是使元素圍繞y軸以給定的度數進行旋轉。

      3.6 過渡：

               {transition:element time;}:該屬性是使元素從一種樣式逐漸變成另一種效果，需要規定的值有：對元素的哪一個屬性進行改變以及改變的時間。注意：可以實現多個屬性的同時改變。

      3.7 漸變：

           線性漸變：{background:linear-gradient(direction color1 color2...);}

           重複線性漸變：{background:repeating-linear-gradient(direction, color1 value%,color2 value%,...);}

           徑向漸變：{background:radial-gradient(postition,shape,size, color1 value%,color2 value%,...);}

           重複徑向漸變：{background:repeating-radial-gradient(postition,shape,size, color1 value%,color2 value%,...);}