CSS是我們常用的控制網頁樣式和布局的一種标準。
CSS3是最新的CSS标準。
CSS3被拆分為“子產品”，舊的規範也已經拆分為小的塊，同時還增加了新的屬性。
一些比較重要的CSS3的子產品：選擇器、盒模型、背景和邊框、文字特效、2D/3D轉換、動畫等。
CSS3邊框：
使用用CSS3，可以建立圓角邊框，添加陰影框，并作為邊界的形象而不使用畫面設計程式，如Photoshop等軟體。
CSS3圓角：border-radius屬性——建立邊框線的圓角
示例：
值的類型可以是像素，也可以為百分比。
CSS3盒子陰影：box-shadow屬性——建立陰影
示例：
值有3個時，表示距離左側、距離上側、影子顔色
值有4個時，表示距離左側、距離上側、虛化的像素、影子顔色
值有5個時，表示距離左側、距離上側、虛化的像素、影子顔色、是否顯示在内部并且将顔色進行反轉
CSS3邊界圖檔：border-image屬性——可以允許使用圖檔作為邊框
示例：
border-image屬性在IE和QQ等浏覽器中并不相容
CSS3背景：
背景圖檔大小：background-size屬性——可以規定背景圖檔的尺寸
示例：
兩個值，分别表示寬度，高度。可用像素和百分比。
背景圖檔定位：background-origin屬性——規定背景根據邊框定位還是根據文本定位
示例：
border-box：根據邊框定位
content-box：根據文本進行定位
多重背景圖檔：background-image屬性——可以規定多張不相同的圖檔疊加出現效果，最好使用矢量圖。
示例：
寫法中使用逗号隔開引用圖檔即可。
CSS3文本效果：
文本陰影：text-shadow屬性——可以向文本應用陰影效果
示例：
四個值：分别代表距離左側、距離上側、模糊程度及陰影顔色
文本自動換行：word-wrap屬性——允許文本強制文本進行換行，這意味着會對單詞進行拆分
示例：
值：break-word：允許對單詞進行拆分換到下一行。
CSS3 轉換：
通過CSS3轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。
轉換是使元素改變形狀、尺寸、位置的一種效果。
我們可以使用2D或3D轉換來轉換我們的元素。
2D轉換：transform屬性——變形、轉換
内置方法：rotate()——進行旋轉，括号内部寫旋轉角度，預設順時針旋轉
允許負值，元素将進行逆時針旋轉
示例：
内置方法：translate()——從目前位置進行移動，括号内為x，y值
允許負值，将反方向移動
示例：
内置方法：scale()——改變原始尺寸，按照倍數變化，括号内為width、height的倍數
示例：
内置方法：skew()——水準、垂直方向進行扭轉，括号内是水準扭轉角度、垂直扭轉角度
示例：
3D轉換：transform屬性——變形、轉換
内置方法：rotateX()——沿水準X軸進行垂直的翻轉，括号内寫轉動度數
示例：
内置方法：rotateY()——沿垂直Y軸進行水準的翻轉，括号内寫轉動度數
示例：
2D轉換跟3D轉換的差別：2D轉換僅僅在于平面，文字可以看出并沒有反過來
3D轉換是相當于鏡面效果的，進行了前後空間（涉及到了Z軸）的占用進行的翻轉。
示例：
CSS3過渡：transition屬性——專門應對顔色、長度、寬度、位置等變化的過渡
通過CSS3，我們可以在不使用Flash和JavaScript的情況下，為目前某元素從某樣式改變為某樣式的時候添加過渡效果。
我們僅僅使用到了一個transition屬性，專門來寫過渡從一個樣式到另一個樣式過渡時所花費的時間，以秒為機關。若時長不規定，預設為0，即沒有過渡時間。
在使用這個過渡效果的時候，我們使用了類似于超連結的l(link)、v(visited)、h(hover)、a(active)樣式的控制。
此過渡時間可以規定背景改變、位置改變、及上面看到過的2D轉換、3D轉換再加上位置改變等樣式變化需要使用的時間長度。
示例：
主要使用hover和active：
hover：當我們滑鼠指向的時候使用的樣式
active：當滑鼠點選下去的時候使用的樣式
不僅僅可以在滑鼠指向時自動使用過渡時間，當我們使用JS對于樣式的某一部分進行修改之後也可以使用。
示例：
通過以上的對比，能夠看出擁有過渡效果更為容易被接收，不會顯得樣式變化過于突兀。
當然，我們的樣式屬性過渡可以分開單獨應對寬度、高度、顔色、2D、3D轉換來設定過渡時間。有喜歡單獨寫的同學可以參考W3School中的教程。
CSS3動畫：
通過CSS3，我們能夠建立動畫，這樣可以在許多網頁中取代動畫圖檔、Flash動畫以及JavaScript動畫。
想要建立CSS3動畫，需要遵循@keyframes規則。
@keyframes規則用于建立動畫。在@keyframes中規定某項CSS樣式，就能建立由目前樣式逐漸改為新樣式的動畫效果。
注：IE需要10及以上。
建立好動畫之後需要綁定到某個選擇器，否則不會産生任何動畫效果。
使用animation進行動畫捆綁。兩個值：動畫名稱、時長。
時間長度必須規定，否則預設為0。也就是表示沒有動畫效果。
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
可以改變任意多的樣式以及任意多的次數。
我們一般情況下使用0%~100%來規定動畫發生的時機。或者使用關鍵詞from...to...，效果等同于0%~100%。
0%是動畫的開始，100%是動畫的完成。
為了得到最佳的浏覽器支援，我們将始終使用百分比來進行規定動畫
以上示例中隻進行了一個樣式的改變。接下來我們看多項改變。
多項改變時隻需要在每個百分号後的花括号内寫上就可以了。
在以上示例中，我們的動畫隻能進行一次就立馬停止了。我們想要此動畫效果持續執行，就隻需要在我們的綁定選擇器的動畫名稱和時長之後加上一個infinite值就可以無限執行了。
注：infinite——無限。
我們可以看出在上一個示例中，div的運作速度是開始慢，中間快，結束放慢的。這是預設的ease屬性帶來的效果，若想讓所有速度相同，我們可以在綁定選擇器之後寫上linear即可。
注：ease——預設開始慢慢加速，結束時慢慢減速。
linear——預設始終使用相同速度運作。
在以上所有無限動畫示例中，我們可以看出動畫是按照我們寫好的順序一直在執行，我們可不可以将它設定為交替執行呢？答案是可以的。
在捆綁選擇器的動畫名稱、時長、無限次數後面寫上一個alternate即可。
注：alternate——交替執行（也可以成為正反執行）
以上這些就是我們常用到的一些CSS3的樣式屬性，當然還有很多其他的，比如将文本像在報紙上一樣排列為多列等不怎麼常用的
轉載于:https://www.cnblogs.com/zqseven/p/6140563.html