CSS3 基本知識
一、CSS3 簡介
CSS 指層疊樣式表 (Cascading Style Sheets)，用於控制網頁的樣式和佈局，CSS3 是最新的 CSS 標準。
css
在網頁製做時採用層疊樣式表，能夠有效的對頁面的佈局、字體、顏色、背景和其餘效果實現更加精確的控制，只要對相應的代碼作一些簡單的修改，就能夠改變同一頁面的不一樣部分。經過僅僅編輯一個簡單的 CSS 文件，外部樣式表有能力同時改變站點中全部頁面的佈局和外觀。
html
CSS3 語言開發是朝着模塊化發展的。以前的規範做爲一個模塊很龐大並且比較複雜，因此 CSS3 把舊規範拆分爲一些小的模塊，而且還增長了一些新的模塊。CSS3 徹底向後兼容，瀏覽器將永遠支持 CSS2。
css3
一些最重要的 CSS3 模塊以下：
web
選擇器
瀏覽器
盒模型服務器
背景和邊框網絡
文本效果app
2D/3D 轉換框架
動畫ide
多列布局
用戶界面
二、CSS3 邊框
經過 CSS3 能夠建立圓角邊框、添加陰影框，可使用圖片來繪製邊框，而不須要使用設計軟件，好比 PS。
CSS3 增長了3個新的邊框屬性：border-radius、box-shadow 和 border-image。
(1)、CSS3 圓角邊框
在 CSS2 中添加圓角邊框須要技巧，並且很費事，必須在每一個角使用不一樣的圖片。
使用 CSS3 能夠很容易的建立圓角。
CSS3 的 border-radius 屬性用於建立圓角。
下面的例子，給 DIV 建立一個圓角邊框：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>圓角邊框</title> 6 <style> 7 div{ 8 width:300px; 9 border:2px solid #8B8B83; 10 background:#DDDDDD; 11 padding:10px 50px; 12 border-radius:25px; 13 } 14 </style> 15 </head> 16 <body> 17 <div>border-radius 屬性容許你爲元素添加圓角邊框！</div> 18 </body> 19 </html>
在 Chrome 中顯示以下：
去掉 2px 的邊框以後：
(2)、CSS3 邊框陰影
CSS3 的 box-shadow 屬性用於向盒子添加陰影效果。
下面的例子，給 DIV 建立陰影效果：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>盒子陰影</title> 6 <style> 7 div{ 8 width:300px; 9 height:100px; 10 background:#FFFF00; 11 box-shadow:10px 10px 5px #888888; 12 } 13 </style> 14 </head> 15 <body> 16 <div>box-shadow 屬性容許你爲元素添加陰影！</div> 17 </body> 18 </html>
在 Chrome 中顯示以下：
(3)、CSS3 邊框圖片
經過 CSS3 的 border-image 屬性，就可使用圖片來建立邊框。
下面是 W3C 指定的一張 border 圖，標準的 81*81 正方形位圖，每一個菱形圖案爲 27*27，即「九宮格」（27×3）×（27×3）樣式的圖片，他是 CSS3 圖片邊框屬性重要的示意圖：
下面就使用這張圖片在 DIV 中建立圖片邊框：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>邊框圖片</title> 6 <style> 7 div{ 8 width:300px; 9 padding:10px 20px; 10 border:15px solid transparent;/* 指定透明邊框 */ 11 } 12 #round{ 13 border-image:url(images/border.png) 30 30 round; 14 } 15 16 #stretch{ 17 border-image:url(images/border.png) 30 30 stretch; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="round">圖片被平鋪，重複來填充該區域。</div> 23 <br/><br/> 24 <div id="stretch">圖片被拉伸以填充該區域。</div> 25 </body> 26 </html>
在 Chrome 中顯示以下：
(4)、邊框屬性詳解
①、border-radius
border-radius 屬性是一個簡寫屬性，用於設置四個 border -*- radius 屬性。
border-radius 屬性容許你爲元素添加圓角邊框。
語法：
border-radius: 1-4 length|% / 1-4 length|%;
注意：圓角半徑的四個值的順序依次爲：左上角、右上角、右下角、左下角。
若是省略左下角（bottom-left），則與右上角（top-right）是相同的。
若是省略右下角（bottom-right），則與左上角（top-left ）是相同的。
若是省略右上角（top-right），則與左上角（top-left）是相同的。
該屬性的值可使用 length 長度單位來定義圓角的形狀，也可使用 % 來定義圓角的形狀。
在上面圓角邊框的例子中，定義的圓角爲：
border-radius:25px;
等同於：
1 border-top-left-radius:25px; 2 border-top-right-radius:25px; 3 border-bottom-right-radius:25px; 4 border-bottom-left-radius:25px;
下面的例子，是使用 em 單位給 DIV 建立一個圓角邊框：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>邊框圓角</title> 6 <style> 7 div{ 8 width:300px; 9 border:2px solid #8B8B83; 10 background:#DDDDDD; 11 padding:10px 50px; 12 border-radius:2em 1em 4em / 0.5em 3em; 13 /* border-radius:32px 16px 64px / 8px 48px; */ 14 } 15 </style> 16 </head> 17 <body> 18 <div>border-radius 屬性容許你爲元素添加圓角邊框！</div> 19 </body> 20 </html>
在 Chrome 中顯示以下：
上面例子中定義的圓角，等同於：
1 border-top-left-radius:2em 0.5em; 2 border-top-right-radius:1em 3em; 3 border-bottom-right-radius:4em 0.5em; 4 border-bottom-left-radius:1em 3em;
注意：IE9+ 以及全部瀏覽器都支持 border-radius 屬性。
②、box-shadow
box-shadow 屬性能夠設置一個或多個下拉陰影的框。
語法：
box-shadow: h-shadow v-shadow blur spread color inset;
注意：box-shadow 屬性向框添加一個或多個陰影。該屬性是一個用逗號分隔陰影的列表，每一個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規定。省略長度的值是 0。
下面是 box-shadow 屬性的值：
| 值 | 說明 |
| h-shadow | 必需，水平陰影的位置，容許負值。 |
| v-shadow | 必需，垂直陰影的位置，容許負值。 |
| blur | 可選，模糊距離。 |
| spread | 可選，陰影的尺寸。 |
| color | 可選，陰影的顏色。 |
| inset | 可選，將外部陰影 (開始時) 改成內部陰影。 |
注意：IE9+ 以及全部瀏覽器都支持 box-shadow 屬性。
③、border-image
border-image 屬性是一個簡寫屬性，用於設置全部邊框圖片。
語法：
border-image: source slice width outset repeat;
能夠設置的屬性：
border-image-source 用於指定邊框使用圖片的路徑。
border-image-slice 圖片邊框向內偏移。
border-image-width 圖片邊框的寬度。
border-image-outset 邊框圖像區域超出邊框的量。
border-image-repeat 圖像邊框是否應平鋪（repeat）、鋪滿（round）或拉伸（stretch）。
省略的值，會設置爲他的默認值。
爲了便於理解，以及對每一個單獨屬性的解析，能夠給 W3C 指定的 border 圖簡單的作一些標記，以下：
而後，將 DIV 的透明邊框改成 30px，再使用上面的圖給 DIV 建立圖片邊框，在 Chrome 中顯示以下：
雖然顯示效果不佳，但不影響咱們觀察圖片邊框、平鋪以及拉伸到底都作了些什麼：
邊框圖片的四個角即標有數字 1，3，7，9 的格子，始終保持不變。
邊框圖片的中間即標有數字 5 的格子，無論是被平鋪仍是仍是被拉伸，他都會被雙向拉伸。
當邊框圖片被平鋪時，標有數字 2，4，6，8 的各自，其中 2 和 8 被水平重複，4 和 6 則垂直重複。
當邊框圖片被拉伸時，標有數字 2，4，6，8 的格子，其中 2 和 8 被水平拉伸，4 和 6 則垂直拉伸。
注意：IE11 以及全部瀏覽器都支持 border-image 屬性，IE9 和 IE10 不支持該屬性。
1、border-image-source
border-image-source 屬性指定要使用的圖片，而不是由 border-style 屬性設置的邊框樣式。
該屬性默認值爲 none 沒有圖像被使用。若是值是 none 或者沒法顯示圖片，邊框樣式會被使用。
下面的代碼，使用圖片做爲 DIV 的邊框：
1 div{ 2 border-image-source:url(images/border.png); 3 border:10px solid black; 4 }
爲了確保圖片路徑是正確的，能夠給 body 元素使用該圖片路徑設置背景圖，而後進行調試。
可是，請注意：目前全部瀏覽器都不支持 border-image-source 屬性，因此會顯示 border-style 屬性設置的邊框樣式。可是可使用 border-image 屬性取代他！
2、border-image-slice
border-image-slice 屬性指定圖片邊框向內偏移，默認值爲 100%，即不向內偏移。
語法：
border-image-slice: number|%|fill;
number 數字表示圖像的像素（位圖圖像）或向量的座標（若是圖像是矢量圖像）。
% 百分比圖像的大小是相對的：水平偏移圖像的寬度，垂直偏移圖像的高度。
當值爲 fill 時，則保留圖像的中間部分。
注意：該屬性指定頂部，右側，底部，左側的圖片向內偏移。
若是省略第四個數字/百分比（左側），它和第二個（右側）相同的。若是也省略了第三個（底部），它和第一個（頂部）是相同的。若是也省略了第二個（右側），它和第一個（頂部）是相同的。
border 圖能夠分爲九個區域：四個角，四邊和中間。圖像中間部分將被丟棄（徹底透明的處理），除非指定關鍵字。
下面是在百度圖片中借鑑的邊框圖解，描述很詳細：
注意：目前全部瀏覽器都不支持 border-image-slice 屬性，可使用 border-image 屬性取代他！
三、border-image-width
border-image-width 屬性定義 border-image 的顯示區域的寬度，默認值爲 1。
語法：
border-image-width: number|%|auto;
number 表示相應的 border-width 的倍數。
% 邊界圖像區域的大小：橫向偏移的寬度的面積，垂直偏移的高度的面積。
auto 若是指定了，寬度是相應的 image slice 的內在寬度或高度。
border-image-width 屬性定義 border-image 的顯示區域的寬度。
注意：border-image-width 屬性能夠有4個值。若是第四個值被省略（左側），它和第二個（右側）相同的。若是也省略了第三個（底部），它和第一個（頂部）是相同的。若是也省略了第二個（右側），它和第一個（頂部）是相同的。不容許負值。
目前全部瀏覽器都不支持該屬性，可是可使用 border-image 屬性取代他！
四、border-image-outset
border-image-outset 屬性用於指定在邊框外部繪製邊框圖片超出邊框區域的量，即圖片外凸，默認值爲 0。
注意：目前全部瀏覽器都不支持該屬性，可使用 border-image 屬性取代他！
五、border-image-repeat
border-image-repeat 屬性用於指定圖片邊框是否應重複（repeat）、鋪滿（round）或拉伸（stretch）。
該屬性的默認值是 stretch 拉伸圖片填充區域。repeat 平鋪、重複圖片來填充區域。
round 相似 repeat 值。若是沒法完整平鋪全部圖像，則對圖像進行縮放以適應區域。
注意：該屬性用於規定如何延展和鋪排邊框圖像的邊緣和中間部分。所以，能夠規定兩個值。若是省略第二個值，則採起與第一個值相同的值。
由於全部瀏覽器都不支持 border-image-source 屬性，因此也沒法單獨使用 border-image-repeat 屬性。
可是 IE11 以及全部瀏覽器都支持 border-image-repeat 屬性，IE9 和 IE10 不支持該屬性。所以，可使用 border-image 簡寫屬性設置全部 border-image-* 屬性。
三、CSS3 背景
CSS3 增長了3個新的背景屬性，他們提供了對背景更強大的控制。
IE9，Firefox，Chrome、Safari 和 Opera 都支持新的背景屬性。
(1)、CSS3 background-size
background-size 屬性指定背景圖片的尺寸。
在 CSS3 之前，背景圖片的大小是由圖片的實際大小決定。而在 CSS3 中能夠指定背景圖片的大小，這就容許在不一樣的環境中重複使用背景圖片。
可使用像素或百分比指定圖片尺寸。若是使用百分比規定尺寸，那麼尺寸相對於父元素的寬度和高度。
語法：
background-size: length|%|cover|contain;
length 設置背景圖片的高度和寬度。第一個值設置寬度，第二個值設置高度。若是隻設置一個值，則第二個會被設置爲 "atuo"。
% 以父元素的百分比來設置背景圖片的寬度和高度。第一個值設置寬度，第二個值設置高度。若是隻設置一個值，則第二個值會被設置爲 "auto"。
cover 此時會保持圖像的縱橫比並將圖像縮放成將徹底覆蓋背景定位區域的最小大小。
contain 此時會保持圖像的縱橫比並將圖像縮放成將適合背景定位區域的最大大小。
下面的代碼，重置背景圖片的大小：
1 body{ 2 background:url(images/css3.png) no-repeat; 3 background-size:78px 78px; 4 }
(2)、CSS3 background-origin
background-origin 屬性指定了背景圖像的位置區域。
背景圖片能夠放置於 content-box、padding-box 或 border-box 區域內。
background-origin 屬性規定 background-position 屬性相對於什麼位置來定位，該屬性的位置根據 background-position 屬性值的不一樣，會顯示在 top/right/bottom/left。
若是背景圖像的 background-attachment 屬性爲 "fixed"，則該屬性沒有效果。
background-attachment 屬性是在 CSS1 中定義的屬性，用於規定背景圖像是否固定或者隨着頁面的其他部分滾動。默認值爲 scroll 景圖像會隨着頁面其他部分的滾動而移動。值爲 fixed 時，當頁面的其他部分滾動時，背景圖片不會移動。
語法：
background-origin: padding-box|border-box|content-box;
background-origin 屬性的默認值爲 padding-box 背景圖片相對於內邊距框來定位。值爲 border-box 時，背景圖片相對於邊框來定位。值爲 content-box 時，背景圖像相對於內容框來定位。
下圖能夠很好的展現他們的不一樣：
(3)、CSS3 background-clip
background-clip 屬性指定背景繪製區域。
該屬性和 background-origin 屬性值相同，顯示位置也差很少，但不依賴於 background-position 屬性。該屬性的默認值爲 border-box 背景被剪切到邊邊框，當值爲 padding-box 時，背景被剪切到內邊距框。值爲 content-box時，背景被剪切到內容框。
下圖能夠很好的展現他們的不一樣：
(4)、多個背景圖片
CSS3 容許爲一個元素添加多個背景圖片：
1 body{ 2 background-image:url(images/1.png),url(images/2.png),url(images/3.gif); 3 }
四、CSS3 漸變
CSS3 漸變（gradients）可讓你在兩個或多個指定的顏色之間顯示平穩的過渡。
之前，你必須使用圖像來實現這些效果。可是，經過使用 CSS3 漸變，你能夠減小下載的事件和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，由於漸變是由瀏覽器生成的。
CSS3 定義了兩種類型的漸變：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向。
徑向漸變（Radial Gradients）- 由它們的中心定義。
IE10，Firefox，Chrome、Safari 和 Opera 都支持 CSS3 漸變，IE9 不支持。
(1)、線性漸變
建立一個線性漸變，必須至少定義兩種顏色結點。顏色結點即想要呈現平穩過渡的顏色。同時，還能夠設置一個起點和一個方向（或一個角度）。
語法：
background: linear-gradient(direction【方向】, color-stop1, color-stop2, ...);
①、線性漸變 - 從上到下
默認狀況下，線性漸變都是從上到下，除非指定方向。
下面的例子，是從頂部開始的線性漸變，起點是紅色，慢慢過渡到藍色：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>線性漸變-從上到下</title> 6 <style> 7 #grad{ 8 width:500px; 9 height:200px; 10 background:linear-gradient(red, blue); 11 } 12 </style> 13 </head> 14 <body> 15 <div id="grad"></div> 16 </body> 17 </html>
在 Chrome 中顯示以下：
②、線性漸變 - 從左到右
如需指定方向，從左到右只須要再增長一個用於方向的參數：to right
下面的例子，是從左邊開始的線性漸變，起點是紅色，慢慢過渡到藍色：
1 #grad{ 2 background:linear-gradient(to right, red, blue); 3 }
在 Chrome 中顯示以下：
③、線性漸變 - 對角
能夠經過指定水平和垂直的起始位置來建立一個對角漸變。
下面的例子，從左上角開始到右下角的線性漸變，起點是紅色，慢慢過渡到藍色：
1 #grad{ 2 background:linear-gradient(to bottom right, red, blue); 3 }
在 Chrome 中顯示以下：
④、使用角度
如需在漸變的方向上作更多的控制，能夠定義一個角度，而不用預約義方向（to bottom、to top、to right、to left、to bottom right 等等）。
語法：
background: linear-gradient(angle【角度】, color-stop1, color-stop2);
角度是指水平線和漸變線之間的角度，逆時針方向計算。也就是說，0deg 將建立一個從下到上的漸變，90deg 將建立一個從左到右的漸變。
下面的例子，在線性漸變上使用角度：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>線性漸變 - 使用角度</title> 6 <style> 7 div{ 8 width:500px; 9 height:100px; 10 margin-bottom:10px; 11 color:white; 12 text-align:center; 13 } 14 #grad1{ 15 background:linear-gradient(0deg, red, blue); 16 } 17 #grad2{ 18 background:linear-gradient(90deg, red, blue); 19 } 20 #grad3{ 21 background:linear-gradient(180deg, red, blue); 22 } 23 #grad4{ 24 background:linear-gradient(-90deg, red, blue); 25 } 26 </style> 27 </head> 28 <body> 29 <div id="grad1">0deg</div> 30 <div id="grad2">90deg</div> 31 <div id="grad3">180deg</div> 32 <div id="grad4">-90deg</div> 33 </body> 34 </html>
在 Chrome 中顯示以下：
⑤、使用多個顏色結點
下面的例子，帶有多個顏色結點從上到下的線性漸變：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>線性漸變 - 多顏色結點</title> 6 <style> 7 div{ 8 width:500px; 9 height:120px; 10 } 11 #grad1{ 12 background:linear-gradient(red, green, blue); 13 } 14 #grad2{ 15 /* 紅、橙、黃、綠、藍、靛、紫 */ 16 background:linear-gradient(red, orange, yellow, green, blue, indigo, purple); 17 } 18 #grad3{ 19 background:linear-gradient(red 10%, yellow 85%, green 90%); 20 } 21 </style> 22 </head> 23 <body> 24 <h3>3 個顏色結點，均勻分佈：</h3> 25 <div id="grad1"></div> 26 <h3>7 個顏色結點，均勻分佈：</h3> 27 <div id="grad2"></div> 28 <h3>3 個顏色結點，不均勻分佈：</h3> 29 <div id="grad3"></div> 30 </body> 31 </html>
在 Chrome 中顯示以下：
下面的例子，是一個帶有彩虹色和文本的線性漸變背景：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>線性漸變 - 彩虹色</title> 6 <style> 7 #grad{ 8 width:600px; 9 height:60px; 10 line-height:60px; 11 text-align:center; 12 font-size:40px; 13 font-weight:bold; 14 background:linear-gradient(to right, red, orange, yellow, green, blue, indigo, purple); 15 } 16 </style> 17 </head> 18 <body> 19 <div id="grad">漸變背景</div> 20 </body> 21 </html>
在 Chrome 中顯示以下：
⑥、使用透明度
CSS3 漸變也支持透明度（transparency），可用於建立減弱變淡的效果。
可使用 rgba() 函數來定義顏色結點，以便於添加透明度。
rgba() 函數中的最後一個參數能夠是從 0 到 1 的值，它定義了顏色的透明度：0 表示徹底透明，1 表示徹底不透明。
下面的例子，是從左到右的漸變，起點是徹底透明的，慢慢過渡到徹底部透明的紅色：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>線性漸變 - 使用透明度</title> 6 <style> 7 #grad{ 8 width:500px; 9 height:200px; 10 background:linear-gradient( to right, rgba(255,0,0,0), rgba(255,0,0,1) ); 11 } 12 </style> 13 </head> 14 <body> 15 <div id="grad">徹底透明</div> 16 </body> 17 </html>
中文：紅色，英文：red，RGB：255 0 0，16進制：#FF0000，rgba() 函數指定紅色半透明：rgba(255, 0, 0, 0.5);
在 Chrome 中顯示以下：
⑦、重複的線性漸變
repeating-linear-gradient() 函數可用於重複線性漸變。
下面的例子，使用多個顏色結點建立從上到下重複的線性漸變：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>線性漸變 - 重複</title> 6 <style> 7 #grad{ 8 width:500px; 9 height:200px; 10 background:repeating-linear-gradient(red, yellow 10%, green 20%); 11 } 12 </style> 13 </head> 14 <body> 15 <div id="grad"></div> 16 </body> 17 </html>
在 Chrome 中顯示以下：
(2)、徑向漸變
徑向漸變由它的中心定義。
建立一個徑向漸變，也必須至少定義兩種顏色結點。
顏色結點即想要呈現平穩過渡的顏色。同時，還能夠指定漸變的中心、形狀（原型或橢圓形）、大小。
默認狀況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。
語法：
background: radial-gradient(center, shape, size, start-color, ..., last-color);
①、徑向漸變 - 顏色結點均勻分佈
默認狀況下，徑向漸變的顏色均勻分佈：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>徑向漸變 - 默認均勻</title> 6 <style> 7 #grad{ 8 width:300px; 9 height:200px; 10 background:radial-gradient(red, green, blue); 11 } 12 </style> 13 </head> 14 <body> 15 <div id="grad"></div> 16 </body> 17 </html>
在 Chrome 中顯示以下：
下面的例子，是建立一個顏色不均勻分佈的徑向漸變：
1 #grad{ 2 background:radial-gradient(red 10%, green 25%, blue 60%); 3 }
在 Chrome 中顯示以下：
②、設置形狀
shape 參數定義了形狀。
該參數的值能夠是 circle 或 ellipse。默認值爲 ellipse 表示橢圓形，circle 則表示圓形。
下面的例子，建立一個默認形狀和一個圓形的徑向漸變：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>徑向漸變 - 設置形狀</title> 6 <style> 7 div{ 8 width:300px; 9 height:200px; 10 } 11 #grad1{ 12 background:radial-gradient(red, yellow, blue); 13 } 14 #grad2{ 15 background:radial-gradient(circle, red, yellow, blue); 16 } 17 </style> 18 </head> 19 <body> 20 <h3>默認，橢圓形 ellipse：</h3> 21 <div id="grad1"></div> 22 <h3>圓形 circle：</h3> 23 <div id="grad2"></div> 24 </body> 25 </html>
在 Chrome 中顯示以下：
③、不一樣尺寸大小關鍵字的使用
size 參數定義了漸變的大小。它能夠是如下四個值：
closest-side 最近的邊
farthest-side 最遠的邊
closest-corner 最近的角
farthest-corner 最遠的角，默認值。
注意：目前全部瀏覽器都不支持該參數，可是能夠添加相應瀏覽器的私有前綴來得到支持。具體使用參照下面代碼。
下面的例子，是帶有不一樣尺寸大小關鍵字的徑向漸變：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>徑向漸變 - 關鍵字</title> 6 <style> 7 div{ 8 width:120px; 9 height:120px; 10 } 11 #grad1{ 12 background: -ms-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* IE10+ */ 13 background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox */ 14 background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Chrome and Safari */ 15 background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera */ 16 background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 標準語法放在最後 */ 17 } 18 19 #grad2{ 20 background: -ms-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* IE10+ */ 21 background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox */ 22 background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Chrome and Safari */ 23 background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera */ 24 background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 標準語法放在最後） */ 25 } 26 27 #grad3{ 28 background: -ms-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* IE10+ */ 29 background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Firefox */ 30 background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Chrome and Safari */ 31 background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera */ 32 background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 標準語法放在最後 */ 33 } 34 35 #grad4{ 36 background: -ms-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* IE10+ */ 37 background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox */ 38 background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Chrome and Safari */ 39 background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera */ 40 background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 標準語法放在最後 */ 41 } 42 </style> 43 </head> 44 <body> 45 <h3>closest-side（最近的邊）：</h3> 46 <div id="grad1"></div> 47 <h3>farthest-side（最遠的邊）：</h3> 48 <div id="grad2"></div> 49 <h3>closest-corner（最近的角）：</h3> 50 <div id="grad3"></div> 51 <h3>farthest-corner（默認，最遠的角）：</h3> 52 <div id="grad4"></div> 53 </body> 54 </html>
在 Chrome 中顯示以下：
④、重複的徑向漸變
repeating-radial-gradient() 函數可用於重複徑向漸變。
下面的例子，創一個徑向漸變：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>徑向漸變 - 重複</title> 6 <style> 7 div{ 8 width:300px; 9 height:200px; 10 } 11 #grad{ 12 background: repeating-radial-gradient(red, yellow 10%, green 15%); 13 } 14 </style> 15 </head> 16 <body> 17 <div id="grad"></div> 18 </body> 19 </html>
在 Chrome 中顯示以下：
五、CSS3 文本效果
在 CSS3 中增長了多個文本屬性，可用於更好的展現文本內容。
(1)、CSS3 文本陰影
CSS3 的 text-shadow 屬性可用於建立文本陰影。
能夠指定水平陰影、垂直陰影、模糊距離以及陰影的顏色。
語法：
text-shadow: h-shadow v-shadow blur color;
注意：text-shadow 屬性向文本添加一個或多個陰影。屬性是陰影，每一個陰影有兩個或三個長度值和一個可選的顏色值進行規定。省略的長度爲 0。默認值爲 none。
h-shadow 必需。水平陰影的位置。容許負值。
v-shadow 必需。垂直陰影的位置。容許負值。
blur 可選。模糊的距離。
color 可選。陰影的顏色。
IE10+、Firefox、Chrome、Safari 和 Opera 都支持 text-shadow 屬性，IE9 不支持。
下面的例子，向標題添加陰影效果：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文本陰影</title> 6 <style> 7 h1{ 8 text-shadow: 3px 3px 3px #F00; 9 } 10 </style> 11 </head> 12 <body> 13 <h1>我是大標題</h1> 14 </body> 15 </html>
在 Chrome 中顯示以下：
下面的例子，是多個文本陰影效果：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文本陰影</title> 6 <style> 7 #txt1{ 8 text-shadow: 3px 3px 6px #F00; 9 } 10 #txt2{ 11 text-shadow: 0 0 5px #F00; 12 } 13 #txt3{ 14 color:#FFF; 15 text-shadow: 3px 3px 5px #000; 16 } 17 </style> 18 </head> 19 <body> 20 <h1 id="txt1">帶有模糊效果的文本陰影</h1> 21 <h1 id="txt2">霓虹燈效果的文本陰影</h1> 22 <h1 id="txt3">白色文本上的陰影</h1> 23 </body> 24 </html>
在 Chrome 中顯示以下：
(2)、CSS3 強制換行
word-wrap 屬性容許長的內容能夠自動換行。
默認值爲 normal 只在容許的斷字點換行，瀏覽器保持默認處理。當值爲 break-word 時，指定在在長單詞或 URL 地址內部進行換行。
若是某個單詞太長，就可能超出其包含塊，擴展到外面。
CSS3 的自動換行屬性容許強制文本換行，即便這意味着會對單詞進行拆分。
IE9+、Firefox、Chrome、Safari 和 Opera 都支持 word-wrap 屬性。
下面的例子，是瀏覽器默認換行和強制換行的對比：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文本換行</title> 6 <style> 7 p{ 8 width:12em; 9 border:1px solid red; 10 } 11 #txt{ 12 word-wrap:break-word; 13 } 14 </style> 15 </head> 16 <body> 17 <p>彼岸時光：http://www.cnblogs.com/Mtime/ 彼岸流年，時光清淺</p> 18 <p id="txt">彼岸時光：http://www.cnblogs.com/Mtime/ 彼岸流年，時光清淺</p> 19 </body> 20 </html>
因爲各個遊覽器引擎對於文檔的渲染存在差別，以及瀏覽器缺省值的不一樣，致使顯示結果也存在差別，這一點在實際使用時須要注意，避免形成沒必要要的結果。
清空上面文檔的內外邊距，重置瀏覽器的默認樣式，具體顯示以下：
在 Chrome 中顯示以下：
在 IE9+ 中顯示以下：
在 Firefox 中顯示以下：
(3)、其餘新屬性
下面是 CSS3 中增長的文本屬性：
| 屬性 | 說明 |
| text-shadow | 向文本添加陰影。 |
| word-wrap | 容許對長的不可分割的單詞進行分割並換行到下一行。 |
| text-justify | 規定當 text-align 設置爲 "justify" 時所使用的對齊方法。 |
| text-overflow | 規定當文本溢出包含元素時發生的事情。 |
| text-outline | 規定文本的輪廓。 |
| text-align-last | 設置如何對齊最後一行或緊挨着強制換行符以前的行。 |
| text-emphasis | 向元素的文本應用重點標記以及重點標記的前景色。 |
| hanging-punctuation | 規定標點字符是否位於線框以外。 |
| punctuation-trim | 規定是否對標點字符進行修剪。 |
| text-wrap | 規定文本的換行規則。 |
| word-break | 規定非中日韓文本的換行規則。 |
六、CSS3 字體
網頁是文字的載體，網頁中展現最多的內容就是文字，即便是一個圖片網頁，但也離不開文字的描述。
而經過 CSS3 ，網頁能夠呈現不一樣的字體效果，而沒必要只是使用「web-safe」字體。
(1)、CSS3 @font-face 規則
在 CSS3 以前，網站中的字體必須使用用戶計算機上已經安裝好的字體，或者把想要的文字作成圖片，以圖片的方式展現具備特殊效果的文字。
而經過 CSS3，在網站中就可使用任意的文字字體。
使用 CSS3 字體，只須要簡單的將字體文件包含在網站中，它會自動下載給須要的用戶。
網站中所使用的字體是在 CSS3 @font-face 規則中定義的。
@font-face 是 CSS3 中的一個功能模塊，主要是把自定義的 Web 字體嵌入到網頁中，是用於實現網頁字體多樣性的模塊。@font-face 的做用是從網上下載並使用自定義字體，使頁面顯示字體不依賴用戶的操做系統字體環境。
語法：
@font-face：{屬性: 取值;}
@font-face 規則定義：
1 @font-face{ 2 font-family: 必需。字體名稱; 3 src: url(必需。字體文件的 URL); 4 font-weight: 可選。字體粗細，默認是 "normal"。 5 font-style: 可選。字體樣式，默認是 "normal"。 6 font-stretch: 可選。如何拉伸字體，默認是 "normal"。 7 }
注意：URL 請使用小寫字母的字體，大寫字母在 IE 中會產生意外的結果。
(2)、字體類型和瀏覽器支持
各版本的瀏覽器對於 Web 字體類型的支持各不相同，字體格式主要有如下幾種：
Web Open Font Format、TrueType Format/OpenType Format、Embedded OpenType Format、SVG
①、Web Open Font Format（.woff 格式）
WOFF 是 W3C 標準推薦的一種 Web 字體格式，他是一個開放的 TrueType/OpenType 的壓縮版本，因此 WOFF 字體一般比其它字體加載的要快些，並且這種字體格式還能夠加入元信息和受權信息，所以獲得了現代全部瀏覽器的支持。IE9+ 以及全部瀏覽器都支持該格式。
下面是 W3C中國 中的介紹：2014年5月8日，W3C的Web字體工做組（WebFonts Working Draft）發佈了WOFF 2.0文件格式（WOFF File Format 2.0）的首份標準草案（First Public Working Draft）。該草案基於普遍使用的WOFF 1.0，提供加強的字體壓縮功能，減小網絡帶寬的使用，同時WOFF 2.0仍將支持在移動設備等上的快速字體解壓縮能力。WOFF 2.0結合了內容感知（content-aware）的預處理過程，以及改進的熵編碼（entropy coding）技術，比WOFF 1.0採用的Flate壓縮技術具備更好的性能。
注意：IE9+ 並不支持 WOFF 2.0 字體格式。
②、TrueType Format（.ttf 格式）和 OpenType Format（.otf 格式）
TTF 字體是 Windows 和 Mac 系統最經常使用的字體格式，OTF 是 Microsoft 與 Adobe 基於 TTF 字體的基礎上開發的，並提供了更多功能。Firefox、Chrome、Safari 以及 Opera 支持 TTF 和 OTF 字體格式。
③、Embedded OpenType Format（.eot 格式）
EOT 是嵌入式字體，是微軟開發的技術，IE 的專用字體，容許 OTF 字體用 @font-face 嵌入到網頁並下載至瀏覽器渲染，存儲在臨時安裝文件夾下。但該格式字體只存在於 IE 早期的版本，由於 IE 8 以及更早版本不支持新的 @font-face 規則，因此只有 IE9+ 瀏覽器可使用。
④、SVG（.svg 格式）
SVG 是 W3C 制定的開放標準的圖形格式。SVG 字體就是基於 SVG 技術來呈現字體，SVG 字體是一種用矢量圖格式改進的字體格式，體積上比矢量圖更小，適合在手機設備上使用。目前只有 Chrome，Safari 和 Opera 支持該字體格式。
IE，Firefox，Chrome、Safari 和 Opera 這些主流瀏覽器都是老外的，不過最近 Opera 被 360 和崑崙萬維給收購了，@font-face 老外用着那是至關嗨，他們就沒考慮過中文的感覺，@font-face 對於英文的支持很是成熟。英文字體的文件看到中文字體文件那就是：忽有龐然大物拔山倒樹而來！還曾一度被認爲中文不適合嵌入網頁，中文一套字體大概都是 3-8M 的樣子，使用網絡字體須要額外的 HTTP 鏈接，這會影響頁面的加載速度和性能，耗費服務器資源。因此使用網絡字體還需慎重，@font-face 並不適合在頁面上大範圍的應用，而是用在最有必要展現的內容上，能夠加強頁面體驗。相比英文字體，中文字體的網頁開發仍是有着極大的侷限性。
網上有不少提供字體下載的網站，找到本身須要的字體下載後，可使用在線轉換字體格式服務，好比 FontsQuirrel，該網站提供的在線工具 webfont-generator，能夠在線將字體轉換成兼容各類瀏覽器的字體格式 .woff .woff2 .eot .ttf .svg。
在網站中使用中文 @font-face，比較好的辦法就是經過 WebFont 網站來完成，中文比較專業的就是 有字庫，只須要提交你想要的字，就能夠自動生成支持全部瀏覽器的 @font-face，直接在線引用，無需下載，支持定製字庫。也可使用 易字雲，易字雲其實就是「字體管家「，目前也提供了 WebFont 服務，他的主要特色就是字體免費受權，而且支持多種開發環境：安卓、IOS移動端、H5 頁面和 Web 網站以及遊戲等。還可使用鵝廠的 字蛛 （FontSpider），他是中文 WebFont 本地自動化壓縮與轉碼工具，經過自動化技術來壓縮、轉碼跨平臺的中文字體，可讓網頁自由嵌入中文字體。具體的使用方法，百度知道。雖然 阿里巴巴 圖標庫也提供了 Web font 服務，可是字體實在是太有限了。
(3)、使用須要的字體
在新的 @font-face 規則中，必須首先定義字體的名稱（好比 myFirstFont），而後指向該字體文件。
設置字體的名稱建議最好是使用下載字體的默認名稱，或者根據字體的樣式定義合適的名稱。
如需爲 HTML 元素使用字體，只須要經過 font-family 屬性來引用字體的名稱：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>@font-face</title> 6 <style> 7 @font-face{ 8 font-family: myFirstFont; 9 src: url('font/moon_light-webfont.woff'); 10 font-weight:bold; 11 } 12 .web-font{ 13 font-family: myFirstFont; 14 } 15 </style> 16 </head> 17 <body> 18 <p>The best things in life are free, like hugs, smiles, friends, kisses, family, love and good memories.</p> 19 <p class="web-font">The moon belongs to everyone，best things in life they're free，stars belong to everyone，they cling there for you and for me.Love can come to everyone，best things in life they're free，all of the good things，every one of the better things.</p> 20 <p>The best things in life are free, and the second best things are very, very expensive.</p> 21 </body> 22 </html>
在 IE 中顯示以下：
(4)、使用粗體文本
如需在粗體的文本上顯示自定義字體，則須要添加另外一個包含粗體文字的 @font-face 規則：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>@font-face</title> 6 <style> 7 @font-face{ 8 font-family: myFirstFont; 9 src: url('font/sansation-italic-webfont.woff2'), 10 url('font/sansation-italic-webfont.eot'); /* IE9+ */ 11 12 } 13 @font-face{ 14 font-family: myFirstFont; 15 src: url('font/sansation-bolditalic-webfont.woff2'), 16 url('font/sansation-bolditalic-webfont.eot'); /* IE9+ */ 17 font-weight:bold; 18 } 19 .web-font{ 20 font-family: myFirstFont; 21 } 22 </style> 23 </head> 24 <body> 25 <p>The best things in life are free, like hugs, smiles, friends, kisses, family, love and good memories.</p> 26 <p class="web-font">The moon belongs to everyone，<strong>best things in life they're free，</strong>stars belong to everyone，they cling there for you and for me.Love can come to everyone，best things in life they're free，<strong>all of the good things，every one of the better things.</strong></p> 27 <p>The best things in life are free, and the second best things are very, very expensive.</p> 28 </body> 29 </html>
在 IE 中顯示以下：
「sansation-bolditalic-webfont.woff2」 是另外一種字體文件，包含 Sansation 字體的粗體字。只要 font-family 爲 "myFirstFont" 的文本須要顯示爲粗體，瀏覽器就會使用該字體。經過這種方式，能夠爲相同的字體設置許多 @font-face 規則。
上面的例子，使用的是 Sansation 系列字體，無襯線斜體字，在網上下載以後，可使用在線字體轉換，將其轉換爲多種格式。
下面是將下載的 TTF 字體文件經過轉換後獲得的格式：
(5)、中文 @font-face
下面是經過 WebFont 網站提供的 API 來完成的中文自定義字體，支持全部瀏覽器，在本地測試中文 @font-face 須要本地服務器支持。
七、CSS3 2D 轉換
(1)、CSS3 轉換
使用 CSS3 轉換，能夠對元素進行移動、縮放、旋轉、拉長或拉伸。
轉換就是使元素改變形狀、尺寸和位置的一種效果，可使用 2D 或 3D 轉換來轉換元素。
CSS3 的 transform 屬性應用於元素的 2D 或 3D 轉換，該屬性容許對元素旋轉，縮放，移動，傾斜等。
transform-origin 屬性容許改變被轉換元素的位置。2D 轉換元素能夠改變元素的 X 和 Y 軸；3D 轉換元素，還能夠更改元素的 Z 軸。 注意：使用此屬性必須先使用 transform 屬性。
注意：IE9+ 以及全部瀏覽器都支持 2D 轉換。
(2)、translate() 方法
translate() 方法，根據左(X軸)和頂部(Y軸)位置給定的參數，元素從其當前位置移動：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>translate()</title> 6 <style> 7 *{padding:0;margin:0;} 8 div{ 9 width:200px; 10 height:100px; 11 background-color:red; 12 border:1px solid black; 13 } 14 #div2{ 15 transform:translate(50px,100px); 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div1">DIV1</div> 21 <div id="div2">DIV2</div> 22 </body> 23 </html>
transform:translate(50px,100px); 即把元素從左邊移動 50 個像素，從頂部移動 100 像素。
在 Chrome 中顯示以下：
(3)、rotate()
rotate() 方法，元素順時針旋轉給定的角度。容許負值，這樣元素將逆時針旋轉：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>rotate()</title> 6 <style> 7 *{padding:0;margin:0;} 8 div{ 9 width:200px; 10 height:100px; 11 background-color:red; 12 border:1px solid black; 13 } 14 #div2{ 15 transform:rotate(30deg); 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div1">DIV1</div> 21 <div id="div2">DIV2</div> 22 </body> 23 </html>
rotate(30deg); 即元素順時針旋轉 30 度。
在 Chrome 中顯示以下：
(4)、scale()
scale() 方法，根據給定的寬度（X軸）和高度（Y軸）的參數，元素的尺寸會增長或減小：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>scale()</title> 6 <style> 7 *{padding:0;margin:0;} 8 div{ 9 width:100px; 10 height:50px; 11 color:white; 12 font-weight:bold; 13 background-color:red; 14 border:1px solid black; 15 } 16 #div2{ 17 margin:100px; 18 transform:scale(2,4); 19 } 20 </style> 21 </head> 22 <body> 23 <div id="div1">DIV1</div> 24 <div id="div2">DIV2</div> 25 </body> 26 </html>
scale(2,4); 即把寬度轉換爲原始尺寸的 2 倍，把高度轉換爲原始高度的 4 倍。
在Chrome Chrome Chrome Chrome 中顯示以下：
(5)、skew()
skew() 方法，根據給定的水平（X 軸）和垂直（Y 軸）參數，元素翻轉給定的角度：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>skew()</title> 6 <style> 7 div{ 8 width:200px; 9 height:100px; 10 color:white; 11 font-weight:bold; 12 background-color:red; 13 border:1px solid black; 14 15 } 16 #div2{ 17 transform:skew(20deg,30deg); 18 } 19 </style> 20 </head> 21 <body> 22 <div id="div1">DIV1</div> 23 <div id="div2">DIV2</div> 24 </body> 25 </html>
skew(20deg,30deg); 即圍繞 X 軸把元素翻轉 20 度，圍繞 Y 軸翻轉 30 度。
在 Chrome 中顯示以下：
(6)、matrix()
matrix() 方法把全部 2D 轉換方法組合在一塊兒。
matrix 方法須要六個參數，包含數學函數，能夠設置旋轉，縮放，移動（平移）和傾斜元素。
下面是使用 matrix() 方法將 DIV 元素旋轉 30 度：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>matrix()</title> 6 <style> 7 div{ 8 width:200px; 9 height:100px; 10 color:white; 11 font-weight:bold; 12 background-color:red; 13 border:1px solid black; 14 15 } 16 #div2{ 17 transform:matrix(0.866,0.5,-0.5,0.866,0,0); 18 } 19 </style> 20 </head> 21 <body> 22 <div id="div1">DIV1</div> 23 <div id="div2">DIV2</div> 24 </body> 25 </html>
在 Chrome 中顯示以下：
(7)、2D 轉換方法
| 函數 | 說明 |
| matrix(n,n,n,n,n,n) | 定義 2D 轉換，使用六個值的矩陣。 |
| translate(x,y) | 定義 2D 轉換，沿着 X 和 Y 軸移動元素。 |
| translateX(n) | 定義 2D 轉換，沿着 X 軸移動元素。 |
| translateY(n) | 定義 2D 轉換，沿着 Y 軸移動元素。 |
| rotate(angle) | 定義 2D 旋轉，在參數中規定角度。 |
| scale(x,y) | 定義 2D 縮放轉換，改變元素的寬度和高度。 |
| scaleX(n) | 定義 2D 縮放轉換，改變元素的寬度。 |
| scaleY(n) | 定義 2D 縮放轉換，改變元素的高度。 |
| skew(x-angle,y-angle) | 定義 2D 傾斜轉換，沿着 X 和 Y 軸。 |
| skewX(angle) | 定義 2D 傾斜轉換，沿着 X 軸。 |
| skewY(angle) | 定義 2D 傾斜轉換，沿着 Y 軸。 |
(8)、寶麗來圖片
經過 CSS3 的 transform 屬性和 box-shadow 屬性能夠建立好看的寶麗來圖片，即頂部和左右兩邊都有必定距離的白邊，底部的白邊最長，可用於圖片描述：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>寶麗來照片</title> 6 <style> 7 div{ 8 width:300px; 9 padding:10px; 10 margin:20px 10px; 11 border:1px solid #B5B5B5; 12 background-color:white; 13 box-shadow:4px 4px 6px #AAA; 14 } 15 16 .rotate-left{ 17 float:left; 18 transform:rotate(7deg); 19 } 20 21 .rotate-right{ 22 float:left; 23 transform:rotate(-8deg); 24 } 25 </style> 26 </head> 27 <body> 28 <div class="rotate-left"> 29 <img src="images/xi.jpg" alt="海燕吶，你可長點心吧" width="300" height="200"> 30 <p class="heading">最美的時光，留給最美的風景。</p> 31 </div> 32 33 <div class="rotate-right"> 34 <img src="images/mo.jpg" alt="大漠" width="300" height="200"> 35 <p class="heading">大漠孤煙直，長河落日圓。</p> 36 </div> 37 </body> 38 </html>
在 IE 中顯示以下：
八、CSS 3D 轉換
(1)、3D 轉換
2D 轉換是元素平面的變化。
而 3D 轉換是元素立體的變化。
2D 和 3D 轉換都是元素的形狀、尺寸和位置變化的一種效果。
注意：IE10+ 以及全部瀏覽器都支持都支持 3D 轉換，IE9 不支持。
(2)、rotateX() 方法
rotateX()方法，元素圍繞其 X 軸以給定的度數進行旋轉。
下面的例子，將 DIV 元素圍繞 X 軸旋轉 180 度：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3D rotateX()</title> 6 <style> 7 div{ 8 width:200px; 9 height:100px; 10 color:white; 11 font-weight:bold; 12 text-align:center; 13 line-height:100px; 14 background-color:red; 15 border:1px solid black; 16 } 17 #div2{ 18 margin-top:20px; 19 transform:rotateX(180deg); 20 } 21 </style> 22 </head> 23 <body> 24 <div id="div1">我是 DIV1 元素</div> 25 <div id="div2">我是 DIV2 元素</div> 26 </body> 27 </html>
在 Chrome 中顯示以下：
(3)、rotateY() 方法
rotateY() 方法，元素圍繞其 Y 軸以給定的度數進行旋轉。
下面的例子，將 DIV 元素圍繞 Y 軸旋轉 150 度：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3D rotateY()</title> 6 <style> 7 div{ 8 width:200px; 9 height:100px; 10 color:white; 11 font-weight:bold; 12 text-align:center; 13 line-height:100px; 14 background-color:red; 15 border:1px solid black; 16 } 17 #div2{ 18 margin-top:20px; 19 transform:rotateY(150deg); 20 } 21 </style> 22 </head> 23 <body> 24 <div id="div1">我是 DIV1 元素</div> 25 <div id="div2">我是 DIV2 元素</div> 26 </body> 27 </html>
在 Chrome 中顯示以下：
(4)、轉換屬性
下面是全部的轉換屬性：
| 屬性 | 說明 |
| transform | 向元素應用 2D 或 3D 轉換。 |
| transform-origin | 容許改變被轉換元素的位置。 |
| transform-style | 規定被嵌套元素如何在 3D 空間中顯示。 |
| perspective | 規定 3D 元素的透視效果。 |
| perspective-origin | 規定 3D 元素的底部位置。 |
| backface-visibility | 定義元素在不面對屏幕時是否可見。 |
(5)、3D 轉換方法
| 函數 | 說明 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉換，使用 16 個值的 4x4 矩陣。 |
| translate3d(x,y,z) | 定義 3D 轉化。 |
| translateX(x) | 定義 3D 轉化，僅使用用於 X 軸的值。 |
| translateY(y) | 定義 3D 轉化，僅使用用於 Y 軸的值。 |
| translateZ(z) | 定義 3D 轉化，僅使用用於 Z 軸的值。 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉。 |
| rotateX(angle) | 定義沿 X 軸的 3D 旋轉。 |
| rotateY(angle) | 定義沿 Y 軸的 3D 旋轉。 |
| rotateZ(angle) | 定義沿 Z 軸的 3D 旋轉。 |
| scale3d(x,y,z) | 定義 3D 縮放轉換。 |
| scaleX(x) | 定義 3D 縮放轉換，經過給定一個 X 軸的值。 |
| scaleX(y) | 定義 3D 縮放轉換，經過給定一個 Y 軸的值。 |
| scaleX(z) | 定義 3D 縮放轉換，經過給定一個 Z 軸的值。 |
| perspective(n) | 定義 3D 轉換元素的透視視圖。 |
九、CSS3 過渡
(1)、CSS3 過渡
CSS3 過渡是元素從一種樣式逐漸轉變爲另外一種樣式時爲元素添加的效果。在 CSS3 以前，要作出這樣的效果就必需藉助 JS 運動框架來完成，或者使用 Flash 動畫。
要使用 CSS 來實現這一效果，必須規定兩項內容：
指定要添加效果的 CSS 屬性。
指定效果的持續時間。
注意：IE10+ 以及全部瀏覽器都支持過渡效果，IE9 不支持。在 IE9 下 Duang 一下就變化完了，根本沒有說好的過渡，徹底就是 hover 效果。
(2)、過渡應用
下面的例子，是應用於寬度屬性的過渡效果，時常爲 2s，當鼠標懸停於 div 元素上時改變樣式，當鼠標移出元素時，它會逐漸變回原來的樣式：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>過渡</title> 6 <style> 7 #transit{ 8 width:200px; 9 height:100px; 10 background:red; 11 transition:width 2s; 12 } 13 14 #transit:hover{ 15 16 width:600px; 17 } 18 </style> 19 </head> 20 <body> 21 <div id="transit">鼠標你過來，我要變化了</div> 22 </body> 23 </html>
注意：若是未指定時長，則不會有過渡效果，由於默認值是 0。其實跟 JS 過渡動畫 是一個原理。
(3)、多項過渡
要添加多個樣式的過渡效果，添加的多個屬性由逗號隔開。
下面的例子，添加了寬度、高度、透明度等和旋轉的過渡效果：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>多項過渡</title> 6 <style> 7 #transit{ 8 width:100px; 9 height:100px; 10 background-color:red; 11 opacity:0.3; 12 transition:opacity 2s,width 2s,height 2s,transform 2s,color 2s,background-color 2s; 13 } 14 15 #transit:hover{ 16 opacity:1; 17 width:200px; 18 height:200px; 19 transform:rotate(180deg); 20 color:white; 21 background-color:green; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="transit">鼠標你過來，我要變化了</div> 27 </body> 28 </html>
(3)、過渡屬性
下表是全部的過渡屬性：
| 屬性 | 說明 |
| transition | 簡寫屬性，用於在一個屬性中設置四個過渡屬性。 |
| transition-property | 規定應用過渡的 CSS 屬性的名稱。 |
| transition-duration | 規定過渡效果花費的時間。默認是 0。 |
| transition-timing-function | 規定過渡效果的時間曲線，即開始和結束的速度快慢，默認是 "ease"。 |
| transition-delay | 規定過渡效果什麼時候開始。默認是 0。 |
(4)、簡寫屬性的使用
下面的例子，使用了全部的過渡屬性：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>多項過渡</title> 6 <style> 7 #transit{ 8 width:100px; 9 height:100px; 10 background:red; 11 transition-property:width; /* 指定過渡的 CSS 屬性爲寬 */ 12 transition-duration:1s; /* 指定過渡花費的時間爲1s */ 13 transition-timing-function:linear; /* 指定過渡的時間曲線，開始結束速度相同 */ 14 transition-delay:2s;/* 指定在2秒後開始過渡 */ 15 } 16 17 #transit:hover{ 18 width:200px; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="transit">鼠標你先過來，我準備變化</div> 24 </body> 25 </html>
下面的代碼，使用了 transition 簡寫屬性，將四個過渡屬性寫在一個簡寫屬性中：
1 #transit{ 2 transition: width 1s linear 2s; 3 }
十、CSS3 動畫
CSS3 賦予了咱們建立動畫的能力，他能夠取代不少網頁動畫圖片、Flash 動畫以及 JavaScript。
在 CSS 中一些屬性是能夠有動畫效果的，可用於建立動畫和過渡效果。
動畫屬性能夠逐漸地從一個值變化到另外一個值，好比尺寸大小、數量、百分比和顏色。
(1)、CSS3 @keyframes 規則
@keyframes 規則用於建立動畫，在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改成新樣式的動畫效果。
當在 @keyframe 中建立動畫時，必須把它綁定到一個選擇器，不然動畫不會有任何效果。
經過規定至少如下兩項 CSS3 動畫屬性，便可將動畫綁定到選擇器：
規定動畫的名稱。
規定動畫的時長。
注意：IE10+ 以及全部瀏覽器都支持 @keyframe 規則和 animation 屬性。IE9 不支持。
下面的例子，把 「myflash」 動畫捆綁到 DIV 元素，時長 5s，當動畫完成時，會變回初始樣式：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>動畫</title> 6 <style> 7 #move{ 8 width:100px; 9 height:100px; 10 background:red; 11 animation:myflash 5s; 12 } 13 14 @keyframes myflash{ 15 from{ 16 background:red; 17 } 18 to{ 19 background:green; 20 } 21 } 22 </style> 23 </head> 24 <body> 25 <div id="move"></div> 26 </body> 27 </html>
注意：必須定義動畫的名稱和動畫的持續時間，若是省略了動畫時長，動畫則沒法運行，由於默認值是 0。
(2)、CSS3 動畫
動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。
能夠改變任意多的樣式，以及任意多的次數。
可使用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。
0% 是動畫的開始，100% 是動畫的完成。
爲了獲得最佳的瀏覽器支持，因此應該始終定義 0% 和 100% 選擇器。
下面的例子，當動畫爲 25% 及 50% 時改變背景色，而後當動畫 100% 完成時再次改變：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>動畫</title> 6 <style> 7 #move{ 8 width:100px; 9 height:100px; 10 background:red; 11 animation:myflash 5s; 12 } 13 14 @keyframes myflash{ 15 0% {background:red;} 16 25% {background:yellow;} 17 50% {background:blue;} 18 100%{background:green;} 19 } 20 </style> 21 </head> 22 <body> 23 <div id="move"></div> 24 </body> 25 </html>
下面的例子，改變背景色和位置：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>動畫</title> 6 <style> 7 #move{ 8 width:100px; 9 height:100px; 10 background:red; 11 position:relative; 12 animation:myflash 5s; 13 } 14 15 @keyframes myflash{ 16 0% {background:red;left:0px;top:0px;} 17 25% {background:yellow;left:200px;top:0px;} 18 50% {background:blue;left:200px;top:200px;} 19 75% {background:green;left:0px;top:200px;} 20 100%{background:red;left:0px;top:0px;} 21 } 22 </style> 23 </head> 24 <body> 25 <div id="move"></div> 26 </body> 27 </html>
(3)、CSS3 動畫屬性
下面是 CSS3 的全部動畫屬性：
| 屬性 | 說明 |
| @keyframes | 規定動畫。 |
| animation | 全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 |
| animation-name | 規定 @keyframes 動畫的名稱。 |
| animation-duration | 規定動畫完成一個週期所花費的秒或毫秒。默認是 0。 |
| animation-timing-function | 規定動畫的速度曲線。默認是 "ease"。 |
| animation-delay | 規定動畫什麼時候開始。默認是 0。 |
| animation-iteration-count | 規定動畫被播放的次數。默認是 1。 |
| animation-direction | 規定動畫是否在下一週期逆向地播放。默認是 "normal"。 |
| animation-play-state | 規定動畫是否正在運行或暫停。默認是 "running"。 |
(4)、使用簡寫屬性
下面的例子，使用了全部動畫屬性：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>動畫</title> 6 <style> 7 #move{ 8 width:100px; 9 height:100px; 10 background:red; 11 position:relative; 12 animation-name:myflash; /* 指定動畫的名稱爲 myflash */ 13 animation-duration:5s; /* 指定動畫完成話費的時間爲 5 秒 */ 14 animation-timing-function:linear; /* 指定動畫的速度曲線，從頭至尾都是相同的， */ 15 animation-delay:2s; /* 指定動畫在 2 秒後開始 */ 16 animation-iteration-count:infinite;/* 指定動畫的播放次數爲：無限循環播放 */ 17 animation-direction:alternate; /* 指定動畫在在奇數次（一、三、5...）正向播放，在偶數次（二、四、6...）反向播放 */ 18 animation-play-state:running; /* 指定動畫正在播放，默認值，paused 則指定暫停動畫，能夠配個 JS 使用 */ 19 } 20 21 @keyframes myflash{ 22 0% {background:red;left:0px;top:0px;} 23 25% {background:yellow;left:200px;top:0px;} 24 50% {background:blue;left:200px;top:200px;} 25 75% {background:green;left:0px;top:200px;} 26 100%{background:red;left:0px;top:0px;} 27 } 28 </style> 29 </head> 30 <body> 31 <div id="move"></div> 32 </body> 33 </html>
下面的代碼，使用了簡寫的 animation 動畫屬性：
1 #move{ 2 animation:myflash 5s linear 2s infinite alternate; 3 }
十一、CSS3 多列
經過 CSS3，能夠建立多個列來對文本進行佈局，就像報紙那樣。
注意：目前只有 IE10+ 和 Opera 支持多列屬性，IE9 不支持。
Chrome 和 Safari 須要添加前綴 -webkit-。
Firefox 須要添加前綴 -moz-。
(1)、建立多列
column-count 屬性可用於規定元素應該被分隔的列數。
下面的例子，把 DIV 元素中的文本分隔爲三列：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>多列</title> 6 <style> 7 h1{ 8 text-align:center; 9 } 10 #columns{ 11 -moz-column-count:3; /* Firefox */ 12 -webkit-column-count:3; /* Chrome 和 Safari */ 13 column-count:3; 14 } 15 </style> 16 </head> 17 <body> 18 <h1>你不懂我，我不怪你</h1> 19 <div id="columns"> 20 每一個人都有一個死角， 21 本身走不出來，別人也闖不進去。 22 我把最深沉的祕密放在那裏。 23 你不懂我，我不怪你。 24 每一個人都有一道傷口， 25 或深或淺，蓋上布，覺得不存在。 26 我把最殷虹的鮮血塗在那裏。 27 你不懂我，我不怪你。 28 每一個人都有一場愛戀， 29 用心、用情、用力，感動也感傷。 30 我把最炙熱的心情藏在那裏。 31 你不懂我，我不怪你。 32 每一個人都有一行眼淚， 33 喝下的冰冷的水，醞釀成的熱淚。 34 我把最心酸的委屈匯在那裏。 35 你不懂我，我不怪你。 36 每一個人都有一段告白， 37 忐忑、不安，卻飽含真心和勇氣。 38 我把最抒情的語言用在那裏。 39 你不懂我，我不怪你。 40 你永遠也看不見我最愛你的時候。 41 由於我只有在你看不見個人時候，才最愛你。 42 一樣，你永遠也看不見我最寂寞的時候， 43 由於我只有在你看不見個人時候，我才最寂寞。 44 也許，我太會隱藏本身的悲傷。 45 也許，我太會安慰本身的傷痕。 46 也許，你眼中的我，太會照顧本身。 47 因此，你從不考慮個人感覺。 48 你覺得，我能夠很迅速的恢復過來，有些自私的覺得。 49 從陰雨走到豔陽，我路過泥濘、路過風。 50 一路走來，你未曾懂我，我亦未曾怪你。 51 </div> 52 </body> 53 </html>
在 Chrome 中顯示以下：
(2)、指定列之間的間隔
column-gap 屬性用於規定列之間的間隔。
下面的代碼，規定上面例子中三列的間隔爲 40 像素：
1 #columns{ 2 -moz-column-count:3; /* Firefox */ 3 -webkit-column-count:3; /* Chrome 和 Safari */ 4 column-count:3; 5 -moz-column-gap:40px; /* Firefox */ 6 -webkit-column-gap:40px; /* Chrome 和 Safari */ 7 column-gap:40px; 8 }
在 Chrome 中顯示以下：
(3)、列規則
column-rule 屬性是一個簡寫屬性，用於設置列之間的寬度，樣式和顏色。
下面的代碼，指定上面例子中三列之間的寬度、樣式和顏色：
1 #columns{ 2 -moz-column-count:3; /* Firefox */ 3 -webkit-column-count:3; /* Chrome 和 Safari */ 4 column-count:3; 5 6 -moz-column-gap:40px; /* Firefox */ 7 -webkit-column-gap:40px; /* Chrome 和 Safari */ 8 column-gap:40px; 9 10 -moz-column-rule:3px outset #F0F; /* Firefox */ 11 -webkit-column-rule:3px outset #F0F; /* Chrome 和 Safari */ 12 column-rule:3px outset #F0F; 13 }
在 Chrome 中顯示以下：
(4)、多列屬性
下面是全部的 CSS3 多列屬性：
| 屬性 | 說明 |
| columns | 簡寫屬性，設置列數和列寬 |
| column-count | 指定元素應分爲的列數 |
| column-width | 指定列的寬度 |
| column-gap | 指定列之間差距 |
| column-fill | 指定如何填充列 |
| column-rule | 簡寫屬性，用於設置全部列規則 |
| column-rule-color | 指定的列之間顏色規則 |
| column-rule-style | 指定的列之間的樣式規則 |
| column-rule-width | 指定的列之間的寬度規則 |
| column-span | 指定一個元素應該橫跨的列數 |
十二、CSS3 用戶界面
在 CSS3 中，新的用戶界面特性包括調整元素尺寸、盒尺寸以及輪廓等。
(1)、CSS3 調整尺寸（resize）
CSS3 的 resize 屬性用於指定一個元素是否應該由用戶去調整大小。
resize 屬性在網站中應用很是普遍，好比在 QQ 網頁郵箱中，博客園也使用了此效果。
注意：除了 IE 以外全部瀏覽器都支持該屬性。
下的例子，DIV 元素能夠自由調整大小：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>調整尺寸</title> 6 <style> 7 div{ 8 width:300px; 9 border:2px solid red; 10 padding:10px 40px; 11 resize:both; 12 overflow:auto; 13 } 14 </style> 15 </head> 16 <body> 17 <div>resize 屬性規定是否可由用戶調整元素尺寸。</div> 18 </body> 19 </html>
resize 屬性的默認值爲 none 用戶沒法調整元素的尺寸，當值爲 both 時，用戶能夠調整元素的寬度和高度。horizontal 指定用戶可調整元素的寬度。vertical 指定用戶可調整元素的高度。
(2)、CSS3 盒大小調整（box-sizing）
box-sizing 屬性容許以確切的方式定義適應某個區域的具體內容。
注意：IE9+ 以及瀏覽器都支持該屬性。
下面的例子，規定兩個並排的帶邊框盒子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>盒大小</title> 6 <style> 7 #container{ 8 width:30rem; 9 border:1rem solid black; 10 } 11 .box{ 12 box-sizing:border-box; 13 border:1rem solid red; 14 width:50%; 15 float:left; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="container"> 21 <div class="box">這個 div 佔據左半部分。</div> 22 <div class="box">這個 div 佔據右半部分。</div> 23 </div> 24 </body> 25 </html>
box-sizing 屬性容許你以某種方式定義某些元素，以適應區域。好比，須要並排放置兩個帶邊框的框，可經過將 box-sizing 設置爲 "border-box"。這將迫使瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。
該屬性的默認值是 content-box，這是由 CSS2.1 規定的寬度高度行爲。指定元素的寬度和高度分別應用到元素的內容框，在寬度和高度以外繪製元素的內邊距和邊框。
當值爲 border-box 時，爲元素設定的寬度和高度決定了元素的邊框盒。也就是說，爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。
(3)、CSS3 外形修飾（outline-offset）
CSS3 的 outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。
輪廓與邊框有兩點不一樣：
輪廓不佔用空間。
輪廓多是非矩形。
注意：除了 IE 以外全部瀏覽器都支持該屬性。
下面的例子，指定在 DIV 元素邊框以外 15 像素處的輪廓：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>輪廓</title> 6 <style> 7 div{ 8 width:200px; 9 height:100px; 10 margin:20px; 11 padding:10px; 12 border:2px solid black; 13 outline:3px solid red; 14 outline-offset:15px; 15 } 16 </style> 17 </head> 18 <body> 19 <div>這個 div 在邊框邊緣以外 15 像素處有一個輪廓。</div> 20 </body> 21 </html>
在 Chrome 中顯示以下：
(4)、新的用戶界面特性
| 屬性 | 說明 |
| resize | 規定是否可由用戶對元素的尺寸進行調整。 |
| box-sizing | 容許你以確切的方式定義適應某個區域的具體內容。 |
| outline-offset | 對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。 |
| appearance | 容許將元素設置爲標準用戶界面元素的外觀。 |
| icon | 爲創做者提供使用圖標化等價物來設置元素樣式的能力。 |
| nav-index | 設置元素的 tab 鍵控制次序。 |
| nav-up | 規定在使用箭頭 up 導航鍵時向何處導航。 |
| nav-down | 規定在使用箭頭 down 導航鍵時向何處導航。 |
| nav-left | 規定在使用箭頭 left 導航鍵時向何處導航。 |
| nav-right | 規定在使用箭頭 right 導航鍵時向何處導航。 |
- 1. CSS3基本知識
- 2. CSS3基礎知識
- 3. css3基礎知識
- 4. CSS3基本知識點總結
- 5. Html5+CSS3基礎知識彙總-CSS3篇
- 6. HTML5及CSS3基礎知識
- 7. CSS3的基礎知識點
- 8. CSS3基礎知識（一）
- 9. css / css3 基礎知識
- 10. css3小知識
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • Lua 基本語法 - Lua 教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
- 1. CSS3基本知識
- 2. CSS3基礎知識
- 3. css3基礎知識
- 4. CSS3基本知識點總結
- 5. Html5+CSS3基礎知識彙總-CSS3篇
- 6. HTML5及CSS3基礎知識
- 7. CSS3的基礎知識點
- 8. CSS3基礎知識（一）
- 9. css / css3 基礎知識
- 10. css3小知識