css3新特性總結

1、圓角邊框

border-radius:5px;

2、多背景圖

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

3、顏色和透明度(由原來的rgb到如今的rgba)

background: rgba(0,0,0,.5);

4、多列布局和彈性盒模型

display: flex;

5、盒子的變幻（2D、3D）

transform: translate(50px,100px);//移動
transform: rotate();//旋轉
transform: scale();//縮放
transform: skew();//傾斜

用於元素的直接或者鼠標感應變化，沒有其餘變幻參數（如延時，持續時間，變幻曲線），當即改變。

6、過渡和動畫

transition: width 1s linear 2s;

過渡效果，transition經過指定某些屬性和變幻參數，以原始定義爲開始狀態，經過鼠標操做變化(hover)，hover狀態定義結束狀態，實現過渡效果。

animation: myfirst 5s;
@keyframes myfirst {
    0% {background: block;}
    25% {background: red;}
    50% {background: yellow;}
    100% {background: green;}
}

動畫效果，增強版的過渡效果，經過animation指定動畫名和動畫參數，@keyframes定義動畫內容，根據參數自動觸發。

7、引入web字體（在服務器端存儲）

@font-face {
    font-family: myfirstfont;
    src: url(sansation_light.woff);
}
div {
    font-family: myfirstfont;
}

8、媒體查詢

body{
    background: yellow;
}
@media screen and (max-width: 480px){
    background: red;
}

9、陰影

h1 {//文字陰影
    text-shadow: 5px 5px 5px red;
}
div {//盒子陰影
    box-shadow: 10px 5px 5px yellow;
}