CSS3的新特性

上一篇寫了HTML5的新特性，不能落下CSS3獨坐空房啊

HTML5新特性的連接：http://www.javashuo.com/article/p-nejphxyy-kt.html

1. 邊框
   1. border-radius —— 圓角邊框 
   2. box-shadow —— 邊框陰影
   3. border-image —— 圖片自定義邊框

      // 圓角邊框
      border-radius: 25px;
      
      // 邊框陰影 四個參數：水平陰影位置，垂直陰影位置，模糊度 顏色
      box-shadow: 10px 10px 5px #f00
      
      
      // 圖片邊框
      border-image: url(image.jpg) 30 30 round | stretch

2. 背景
   • background-size —— 規定背景圖片的尺寸，在css3前背景圖片的尺寸有圖片實際尺寸決定。
   • background-origin —— 規定背景圖片的定位區域，能夠設置將背景圖片放置於 content-box, padding-box, border-box 區域。
3. 文字效果
   • text-shadow —— 文字陰影
   • word-wrap

     // 文字陰影
     h1 {
       text-shadow: 5px 5px 5px #f00;      // X軸陰影偏移 Y軸陰影偏移 陰影大小 顏色  
     }
     
     
     // 換行
     p {
       word-wrap: normal | break-word;       // 只在容許的斷子點換行 | 在長單詞或者 url 地址內部進行換行  
     }

4. 字體
   • @font-face

     // CSS3可使得設計師可使用任意喜歡的字體，不用必須使用已在用戶計算機上安裝好的字體
     
     @font-face {
         font-family: myFirstFont;
         src: url(),
         font-weight: bold;
     } // 粗體字體
     
     div {
         font-family: myFirstFont;
     }   // 此時便使用了粗體字體

5. 2D轉換
   • translate()
   • rotate()
   • scale()
   • skew()
   • matrix()

     // 順時針旋轉給定度數
     div {
         transform: rotate(30deg);
     }
     
     // 按 XY 軸的數據平移
     div {
         transform: translate(50px, 100px);  // X軸正方向移動 50px，Y軸正方向移動 100px
     }
     
     // 元素擴大/縮小倍數
     div {
         transform: scale(2, 4); // 元素的寬擴大 2 倍，高擴大 5 倍
     }
     
     // 元素反轉給定的角度
     div {
         transform: skew(30deg, 20deg);  // 圍繞 X 軸元素旋轉30度，Y軸旋轉20度
     }

6. 3D轉換 —— 與2D的不相同就是 3D 有了一個 Z 軸
7. 過渡 —— 能夠在不使用 flash 動畫或者 javascript 的前提下，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果

   // 過渡 寬從100px過渡到300px，用時2s
   div {
       transition: width 2s;
       width: 100px;
       height: 100px;
   }
   
   div:hover {
       width: 300px;
   }

8. 動畫 —— @keyframes規則

   @keyframes myfirst {
       0% {background: red;}
       25% {background: yellow;}
       50% {background: blue;}
       100% {background: green;}
   }

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

     div {
         column-count: 3;     // 分紅三列
         column-gap: 40px;     // 列之間間隔 40px
         column-rule: 3px outset #f00;      // 列之間的寬度，樣式和顏色規則
     }