1，圓角border-radius
border-radius:25px; （上右下左）
2，陰影box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：水平陰影的位置，負值爲左側
v-shadow：垂直陰影的位置，負值爲上側
blur：模糊距離
spread：陰影的大小
color：陰影的顏色
inset：指定爲內側陰影
3，邊界圖片border-image
border-image-source，用在邊框的圖片的路徑
border-image-slice，圖片邊框向內偏移
border-image-width，圖片邊框的寬度
border-image-outset，邊框圖像區域超出邊框的量
border-image-repeat，圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)
註釋：Internet Explorer 不支持 border-image 屬性
4，背景background
background-image，指定要使用的一個或多個背景圖像
background-color，指定要使用的背景顏色
background-position，指定背景圖像的位置
left top；x% y%；xpx ypx；
background-size，指定背景圖片的大小
length，設置背景圖片寬度和高度；
percentage，將計算相對於背景定位區域的百分比。
cover，保持圖像的縱橫比並將圖像縮放成將完全覆蓋背景定位區域的最小大小
contain，保持圖像的縱橫比並將圖像縮放成將適合背景定位區域的最大大小
background-repeat，指定如何重複背景圖像
repeat，repeat-x，repeat-y，no-repeat
background-origin，指定背景圖像的定位區域
padding-box 背景圖像填充框的相對位置
border-box 背景圖像邊界框的相對位置
content-box 背景圖像的相對位置的內容框
background-clip，指定背景圖像的繪畫區域
border-box 背景繪製在邊框方框內（剪切成邊框方框），默認值。
padding-box 背景繪製在襯距方框內（剪切成襯距方框）。
content-box 背景繪製在內容方框內（剪切成內容方框）。
background-attachment，設置背景圖像是否固定或者隨着頁面的其餘部分滾動。
scroll 背景圖片隨頁面的其餘部分滾動。這是默認
fixed 背景圖像是固定的
inherit 指定background-attachment的設置應該從父元素繼承
local 背景圖片隨滾動元素滾動
5，文本text
text-decoration，屬性規定添加到文本的修飾
none 默認。定義標準的文本。
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過文本下的一條線。
blink 定義閃爍的文本。
text-indent，屬性規定文本塊中首行文本的縮進。百分比和像素
text-overflow:，屬性規定文本溢出的操作，
clip，修剪文本
ellipsis，顯示省略符號來代表被修剪的文本
string，使用給定的字符串來代表被修剪的文本
text-shadow，文本陰影 h-shadow v-shadow blur color;
word-break，屬性規定自動換行的處理方法。
normal 使用瀏覽器默認的換行規則。
break-all 允許在單詞內換行。
keep-all 只能在半角空格或連字符處換行。
word-spacing屬性增加或減少字與字之間的空白。
word-wrap屬性允許長的內容可以自動換行
normal 只在允許的斷字點換行（瀏覽器保持默認處理）。
break-word 在長單詞或 URL 地址內部進行換行。
white-space屬性指定元素內的空白怎樣處理
normal 默認。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行爲方式類似 HTML 中的 <pre> 標籤。
nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止。
pre-wrap 保留空白符序列，但是正常地進行換行。
pre-line 合併空白符序列，但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。
6，2D轉換 transform：
1）translate(x,y)方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。
translateX(n)，沿着X 軸移動元素；translateY(n)，沿着Y 軸移動元素；
注：用translate結合absolute定位可以實現元素位置水平和垂直居中問題；
2）rotate(deg)方法，在一個給定度數順時針旋轉的元素。負值是允許的，元素逆時針旋轉
3）scale(x,y)方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數：
scaleX(n)，改變元素的寬度，scaleY(n)，改變元素的高度
4）skew(deg,deg)，根據X軸和Y軸的角度，元素進行傾斜
5）matrix() ，matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能
注，需要考慮兼容：
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
7，3D轉換 transform：
rotateX(deg)方法，圍繞其在一個給定度數X軸旋轉的元素。
rotateY(deg)方法，圍繞其在一個給定度數Y軸旋轉的元素。
8，過渡transition：
transition: element time; 指定要添加效果的CSS屬性，持續時間，單位S，可以多項改變；
9，CSS3漸變：
（1）線性漸變：background: linear-gradient(direction, color-stop1, color-stop2, ...);
1）從左到右：to right 四種寫法，兼容不同瀏覽器
2）對角：to bottom right 四種寫法，兼容不同瀏覽器
3）使用角度：background: linear-gradient(angle, color-stop1, color-stop2);
4）使用多個顏色結點： color-stop多個；
5）使用透明度： color-stop顏色值換爲rgba，顏色值加透明度；
6）重複的線性漸變：color-stop 後面空格加上百分比，指定漸變跨度；
（2）徑向漸變：background: radial-gradient(center, shape,size, start-color, ..., last-color);
1）顏色結點均勻分佈：默認直接賦值顏色取值，radial-gradient(red, green, blue);
2）顏色結點不均勻分佈：在每個顏色取值後面加上百分比
3）設置形狀：shape定義形狀，circle表示圓形，ellipse表示橢圓形（默認）
4）不同大小：closest-side、farthest-side、closest-corner、farthest-corner，contain，cover
5）重複的徑向漸變：repeating-radial-gradient()
10，CSS3動畫animation：
1）創建動畫：
@keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改爲新的樣式
定義from樣式和to樣式來構建；或者使用百分比進行構建；
@keyframes myfirst {
from {background:red;}
to {background:yellow;}
}
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
2）使用動畫：
animation: myfirst 5s infinite; 規定動畫名稱，動畫時長，動畫播放次數；