寫css3的屬性的時候，最好加上浏覽器核心辨別，進行相容。 -ms-transform:scale(2,4); /* ie 9 */ -moz-transform:scale(2,4); /* firefox */ -webkit-transform:scale(2,4); /* safari and chrome */ -o-transform:scale(2,4); /* opera */
1.圓角（常用：略）
2.邊框陰影
box-shadow 屬性向框添加一個或多個陰影。
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水準陰影的位置。允許負值。
v-shadow 必需。垂直陰影的位置。允許負值
blur 可選。模糊距離。
spread 可選。陰影的尺寸
color 可選。陰影的顔色
inset 可選。将外部陰影 (outset) 改為内部陰影。
例子：
3.邊框圖檔
border-image 屬性是一個簡寫屬性
- border-image-source 用在邊框的圖檔的路徑。
- border-image-slice 圖檔邊框向内偏移。
- border-image-width 圖檔邊框的寬度。
- border-image-outset 邊框圖像區域超出邊框的量。
- border-image-repeat 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)
4.設定背景的繪制區域（background-clip）
5.設定背景圖的尺寸（background-size）
在 css3 之前，背景圖檔的尺寸是由圖檔的實際尺寸決定的。在 css3 中，可以規定背景圖檔的尺寸，這就允許我們在不同的環境中重複使用背景圖檔。
background-size: length|percentage|cover|contain;
length:設定背景圖像的高度和寬度。第一個值為寬度，第二隻是高度
6.css3字型(@font-face)
在新的 @font-face 規則中，您必須首先定義字型的名稱（比如 myfirstfont），然後指向該字型檔案。
如需為 html 元素使用字型，請通過 font-family 屬性來引用字型的名稱 (myfirstfont)：
7.2d轉換（transform）
translate() 改變元素位置
rotate() 旋轉元素
sacle() 放大縮小元素
skew() 元素翻轉
matrix()
transform 該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
8.過渡
css3 過渡是元素從一種樣式逐漸改變為另一種的效果。
要實作這一點，必須規定兩項内容：
- 規定您希望把效果添加到哪個 css 屬性上
- 規定效果的時長
例一：滑鼠放在div上，div寬度緩慢變化到指定寬度。移除滑鼠，div寬度還原。
這裡的css屬性也可以是位置等。。。
例二：滑鼠放在div上，div緩慢移動到另一個位置。
例三：當然你也可以将兩個效果結合起來。
例四：transition是屬性的簡寫。
transition-property 規定應用過渡的 css 屬性的名稱。
transition-duration 定義過渡效果花費的時間。預設是 0。
transition-timing-function 規定過渡效果的時間曲線。預設是 "ease"。
linear 規定以相同速度開始至結束的過渡效果
ease 規定慢速開始，然後變快，然後慢速結束的過渡效果
ease-in 規定以慢速開始的過渡效果
ease-out 規定以慢速結束的過渡效果
ease-in-out 規定以慢速開始和結束的過渡效果
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值
transition-delay 規定過渡效果何時開始。預設是 0。
9.2d轉換與過渡的結合。
例一：與rotate-在原位置進行旋轉
例二：與translate-沿着x與y進行移動
例三：與scale-滑鼠放再div上，div寬高均放大至原來的兩倍。
例四：與skew-圍繞 x 軸把元素翻轉 30 度，圍繞 y 軸翻轉 20 度
轉載：http://www.cnblogs.com/zqzjs/p/5347691.html