css3圓角

• 設置某一個角的圓角，比如設置左上角的圓角：
  border-top-left-radius:30px 60px;

同時分別設置四個角： border-radius:30px 60px 120px 150px;

設置四個圓角相同：
border-radius:50%;

CSS3陰影

<style type="text/css">
    .box{
        width:200px;
        height:50px;
        background-color:gold;
        /* box-shadow:10px 10px 5px 2px pink inset; */
        box-shadow:10px 10px 5px 2px pink;
    }
</style>
......
<div class="box"></div>

<!-- 給盒子加上了粉紅色的陰影 -->

rgb(新的顏色值表達法)

1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三個數值表示顏色，第四個數值表示顏色的透明度

css transition動畫

linear 勻速
ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速
cubic-bezier(n,n,n,n) 

css3 transform變換

1、translate(x,y) 設置盒子位移
2、scale(x,y) 設置盒子縮放
3、rotate(deg) 設置盒子旋轉
4、skew(x-angle,y-angle) 設置盒子斜切
5、perspective 設置透視距離
6、transform-style flat | preserve-3d 設置盒子是否按3d空間顯示
7、translateX、translateY、translateZ 設置三維移動
8、rotateX、rotateY、rotateZ 設置三維旋轉
9、scaleX、scaleY、scaleZ 設置三維縮放
10、tranform-origin 設置變形的中心點
11、backface-visibility 設置盒子背面是否可見 

css3 animation動畫

1、@keyframes 定義關鍵幀動畫
2、animation-name 動畫名稱
3、animation-duration 動畫時間
4、animation-timing-function 動畫曲線

    linear 勻速
    ease 開始和結束慢速
    ease-in 開始是慢速
    ease-out 結束時慢速
    ease-in-out 開始和結束時慢速
    steps 動畫步數

5、animation-delay 動畫延遲
6、animation-iteration-count 動畫播放次數 n|infinite
7、animation-direction

    normal 默認動畫結束不返回
    Alternate 動畫結束后返回

8、animation-play-state 動畫狀態

    paused 停止
    running 運動

9、animation-fill-mode 動畫前后的狀態

    none 不改變默認行為
    forwards 當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）
    backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）
    both 向前和向后填充模式都被應用