CSS3(圓角 漸變 2D 3D ....)

1:圓角

border-radius:50px||50%;

2:盒子陰影

bax-shadow:(10px 20px 10px 2px red);  //左右偏移 上下偏移 模糊範圍 擴展範圍 陰影顏色

3：文本屬性

text-shadow:同box-shadow
text-overflow:(cilp,ellipsis)  //文字超出盒子時，裁剪或隱藏。
word-break 和 word-wrap

4:顏色 

RGBa顏色: 紅、綠、藍、透明度(alpha)
HSL顏色：色相(0-360)、飽和度(0%-100%)、亮度(0%-100%)
HSLa顏色：alpha(透明度)

5：不透明

opacity:0.5;
filter:Alpha(opacity=45);  //兼容IE8以下透明度

6：漸變
   （1）線性漸變

background: linear-gradient(bottom, red, yellow);
                                漸變方向，顏色1，顏色2...
background：linear-gradient(200deg，red，yellow);
                                漸變角度，顏色1，顏色2...

   （2）徑向漸變

background：radial-gradient(clide 20px 20px，blue);
radial-gradient（形狀 大小 at  位置，顏色1，顏色2...）

7：盒子尺寸

box-sizing   //改變盒子的計算方式

8：背景

     // css3允許背景有多張圖片
     background-image：url(1.jpg),url(2.jpg);
     background-position:top left, center right;
     background-repeat:no-repeat, no-repeat;
     //css3允許設置背景圖片的大小
     background-size:20px 20px;
     background-size:50% 50%;
     background-size:content;    //將圖片縮放成div正好容下的大小，且是等比例縮放。
     background-size:cover;       //將圖片縮放成div正好容下的大小，不是等比例縮放。
     //css3允許設置圖片的位置
     background-origin:border-box；
     background-origin:padding-box；
     background-origin:content-box；
     //css3裁剪背景圖片
     background-clip:border-box; 
     background-clip:padding-box;
     background-clip:content-box;

9:  web字體
    如果用戶計算機中沒有所需要的字體，傳統解決辦法是用圖片代替。css3提供了一種辦法就是用@font-face規則。
    9.1：下載字體。
    9.2：確保找到所有的所需要的字體格式。（.ttf .otf .woff .svg）
    9.3:   將準備好的字體文件放到服務器上。
    9.4：在css中增加@font-size規則。

@font-face{
       font-family: "Emblema One";    //字體名稱
       src: url("Emblema One.woff"),   //url地址
       src: url("Emblema One.ttf")
  }

     9.5：使用自己定義的字體樣式。

@font-face{
      font-family: "Emblema One";  //字體名稱
      src: url("Emblema One.woff"), //url地址
      src: url("Emblema One.ttf")
   }
<p style="font: Emblema One;"></p>

10:  2D轉換

        // 元素轉換函數translate。
        transform:translate(x,y); //數值或百分比
        translate可以拆分爲translateX和translateY
        //元素旋轉函數rotate。
        transform:rotate(45deg); //旋轉角度
        //元素放大縮小函數scale
        transform:scale(1.2,2);  //x軸1.2倍，y軸2倍
        scale可以拆分爲scaleX和scaleY分別設置
        //元素傾斜函數skew
        transform: skew(45deg,-20deg);  //沿x軸和沿y 軸 
        //轉換基準點transform-origin
        transform-origin:left  top;
        transform-origin:(x y z);  //默認爲50% 50% 0；

11:  過渡 

       transition: 過渡屬性  執行時間  時間函數(ease linear ease-in ease-out)  延遲時間；
       transition: all  2s  ease-in-out 3s;
       //上面四個屬性可以分別拆分爲:
       transition-prooperty:all;
       transition-duration:2s;
       transition-timing-function:ease-in-out;
       transition-delay:3s;

12：動畫(animation: myball 1s ease 3s reverse infinite both paused;)   

@keyframes規則    
    animation 不同瀏覽器需要用其私用屬性定義.
    div{
            width:50px;
            height:100px;
    	    backgorund:green;
         }
     @-webkit-keyframes  mybox{
             from{width:50px;}  //from定義第一幀的畫面
             to{width:200px;}   //to定義最後一幀的畫面
       }
      div:hover{
	  -webkit-animation-name:mybox;
	  -webkit-animation-duration:2s;
      }
   (1) 定義動畫執行的次數(animation-iteration-count:infinite;(無限次))
   (2) 定義動畫播放的方向(animation-direction:reverse(反向播放))
   (3) 定義動畫播放前或播放後的狀態（animation-fill-mode:backwards(播放前的狀態和第一幀的狀態相同)
   (4) 定義動畫運行或暫停（animation-play-starte:runing(繼續播放)）

13: 3D轉換

          perspective:1000px;  //元素定義perspective後，說明這個元素已經成爲3D元素。 1000px表示元素與視點的距離 
          perspective-origin:right  top;  //改變視點的位置
          backface-visibility:hidden;  //設置元素旋轉時，背面是否可見
          transform-style  //被轉換的子元素保留其3D轉換