1.居中

text-align:center 是相對於子元素的居中，只對行內元素起作用
margin:0 auto 是相對於自己的居中，對塊元素起作用

2.陰影

box-show:h-shadow v-shadow blur spread color inset
//水平陰影的位置，垂直陰影的位置 ，模糊距離，陰影尺寸，陰影顏色，將外部陰影改為內部陰影
text-show:h-shadow v-shadow blur color
//水平陰影的位置，垂直陰影的位置，模糊距離，陰影顏色

3.背景

background:background-color background-image background-repeat backgrond-attachment background-position
//元素的顏色，背景影象，背景影象是否重複如何重複，背景影象固定或隨頁面其餘部分滾動，背景影象的起始位置
background-repeat:repeat / repeat-x / repeat-y / no-repeat
background-attachment:scroll / fixed
background-position:top left / x% y%
配合background-size 使用
 

4.自定義字型

@font-face{
    font-family:myFontFamily;
    src:url("字型包.ttf"),url("字型包.eot");
    font-weight:normal
    font-style:normal
}
div{
    font-family:myFontFamily
}

4.動畫

瀏覽器核心

-ms-             //IE9
-moz-          //Firefox
-webkit-      //Safari、Chrome
-o-              //Opera

【1】transform

transform:translate(10px,20px)//偏移，距離left（x軸）,top（y軸）的值transform:rotate(10deg)//旋轉，順時針旋轉10度，如果為負值，表示逆時針旋轉度數
transform:scale(2,2)//原始寬高的放大倍數
transform:skew(20deg,20deg)//翻轉，根據x軸，y軸翻轉角度
transform:matrix(1,1,1,1,1,1)//所有2D動畫的組合，共六個引數：旋轉、縮放、移動以及傾斜元素

【2】transition

div{
    width:100px;    
    height:100px;
    transition:width 2s,height 2s,transform 2s;
}
div:hover{
    height:200px;
    width:200px;
    tranform:rotate(180deg)
}

【3】@keyframes

[1]

@keyframes myKeyframes{
    from{background:white}
    to{background:black}
}

[2]

@keyframes myKeyframes{
    0%{background:white;left:0px;top:0px}
    25%{background:lightgray;left:200px;top:0px}
    50%{backgrpund:gray;left:0px;top:200px}
    100%{background:black;left:0px;top:0px}
}
div{
    width:100px;
    height:100px;
    position:relative;
    animation:myKeyframes 2s;
}