CSS3學習總結

不少屬性須要考慮設置兼容性：-moz-火狐、-webkit-谷歌，opera

1、CSS3邊框

一、border-radius(px):將邊框四個角圓化,像素越高越接近圓形

二、border-shadow(陰影移動向右px  陰影移動向下px  陰影寬度px  陰影顏色)：設置陰影

三、border-image：拉昇邊框圖片

2、背景

一、background-origin：圖片可放置於content-box、padding-box、border-box

二、background-size：可設置百分比及px

三、background-image:url(),url()~~：可設置多重圖片

3、文本效果

一、text-shadow（水平陰影px、垂直陰影px、模糊距離px，以及陰影的顏色)

二、{word-wrap:break-word}容許對長的不可分割的單詞進行分割並換行到下一行；

三、word-break：normal|break-all|keep-all  換行

四、text-wrap：normal|none|unrestricted|suppress;

五、使用須要的字體：@font-face{font-family=「qwe」  src=url（「字體的路徑」）}

如需爲 HTML 元素使用字體，可經過 font-family 屬性來引用字體的名稱 (qwe)：

4、2D轉換及3D轉化

一、2D——transform：translate(px) ：移動   3D——transform：translateX(px) /translateY(px) 

二、2D——transform：rotate(deg)：旋轉,類比同上

三、2D——transform：scale(倍數)：放大或縮小，類比同上

四、transform：skew(deg)：自身扭曲

五、perpective：px   圖形的透視效果

5、過渡

元素從一種樣式逐漸改變爲另外一種的效果

-transition-property：XX   改變屬性，例如width

-transition-duration：XX  持續時間

-transition-timing-function：XX  時間曲線，例如linear勻速，ease慢速  ease in慢速進入 ease out 慢速退出 ease-in-out慢入慢出

-transition-delay：XX 延遲開始時間

以上有複合結構，可寫成transition（順序與上順序同）

6、動畫

-@keyframes：定義動畫

-animation：全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。

-animation-name，

-animation-duration：意思同過渡內容差很少

-animation-timing-function：意思同過渡內容差很少

-animation-delay：意思同過渡內容差很少

-animation-iteration-count: infinite  播放次數，infinite是無限次

-animation-direction 在下一週期逆向播放

-animation-play-state：動畫在運行仍是暫定，通常選擇running

animation也可寫成複合結構