做詳細的技術討論可以加我微信：
↓ ↓ ↓ ↓ ↓ ↓ ↓
目錄
八、CSS border-radius 新玩法(含可視化生成工具)
一、媒體查詢media
實例
如果文檔寬度小於 300 像素則修改背景顏色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
1、定義和使用
使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。
@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
2、CSS 語法
@media mediatype（媒體類型） and|not|only (media feature（媒體功能）) {
CSS-Code（css代碼）;
}
你也可以針對不同的媒體使用不同 stylesheets :
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
3、媒體類型
| 值 | 描述 |
|---|---|
| all | 用於所有設備 |
| 用於打印機和打印預覽 | |
| screen | 用於電腦屏幕，平板電腦，智能手機等。 |
| speech | 應用於屏幕閱讀器等發聲設備 |
4、媒體功能
| 值 | 描述 |
|---|---|
| aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的比率 |
| color | 定義輸出設備每一組彩色原件的個數。如果不是彩色設備，則值等於0 |
| color-index | 定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0 |
| device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的比率。 |
| device-height | 定義輸出設備的屏幕可見高度。 |
| device-width | 定義輸出設備的屏幕可見寬度。 |
| grid | 用來查詢輸出設備是否使用柵格或點陣。 |
| height | 定義輸出設備中的頁面可見區域高度。 |
| max-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-color | 定義輸出設備每一組彩色原件的最大個數。 |
| max-color-index | 定義在輸出設備的彩色查詢表中的最大條目數。 |
| max-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-device-height | 定義輸出設備的屏幕可見的最大高度。 |
| max-device-width | 定義輸出設備的屏幕最大可見寬度。 |
| max-height | 定義輸出設備中的頁面最大可見區域高度。 |
| max-monochrome | 定義在一個單色框架緩衝區中每像素包含的最大單色原件個數。 |
| max-resolution | 定義設備的最大分辨率。 |
| max-width | 定義輸出設備中的頁面最大可見區域寬度。 |
| min-aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的最小比率。 |
| min-color | 定義輸出設備每一組彩色原件的最小個數。 |
| min-color-index | 定義在輸出設備的彩色查詢表中的最小條目數。 |
| min-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最小比率。 |
| min-device-width | 定義輸出設備的屏幕最小可見寬度。 |
| min-device-height | 定義輸出設備的屏幕的最小可見高度。 |
| min-height | 定義輸出設備中的頁面最小可見區域高度。 |
| min-monochrome | 定義在一個單色框架緩衝區中每像素包含的最小單色原件個數 |
| min-resolution | 定義設備的最小分辨率。 |
| min-width | 定義輸出設備中的頁面最小可見區域寬度。 |
| monochrome | 定義在一個單色框架緩衝區中每像素包含的單色原件個數。如果不是單色設備，則值等於0 |
| orientation | 定義輸出設備中的頁面可見區域高度是否大於或等於寬度。 |
| resolution | 定義設備的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | 定義電視類設備的掃描工序。 |
| width | 定義輸出設備中的頁面可見區域寬度。 |
5、更多實例
實例
使用 @media 查詢來製作響應式設計：
@media only screen and (max-width: 500px) {
.gridmenu {
width:100%;
}
.gridmain {
width:100%;
}
.gridright {
width:100%;
}
}
6、自己在開發中的總結：
---------適配
@media all screen and (max-width: 1470px“根據屏幕尺寸”) {
+改變的css代碼
}
蘋果筆記本電腦（13.3寸）：1450x825 -------用1470px適配
蘋果筆記本電腦（12寸）輕薄款：1280x740 --------用1300px適配
二、彈性佈局（Flex）
佈局的傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。
2009年，W3C提出了一種新的方案—-Flex佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支持，這意味着，現在就能很安全地使用這項功能。
1、Flex佈局是什麼？
Flex是Flexible Box的縮寫，意爲”彈性佈局”，用來爲盒狀模型提供最大的靈活性。
任何一個容器都可以指定爲Flex佈局。
.box{
display: flex;
}
行內元素也可以使用Flex佈局。
.box{
display: inline-flex;
}
Webkit內核的瀏覽器，必須加上-webkit前綴。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
！！！注意：設爲Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。
2、基本概念
採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱”容器”。它的所有子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱”項目”。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
3、容器的屬性
以下6個屬性設置在容器上：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1 flex-direction屬性
flex-direction屬性決定主軸的方向（即項目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4個值。
- row（默認值）：主軸爲水平方向，起點在左端。
- row-reverse：主軸爲水平方向，起點在右端。
- column：主軸爲垂直方向，起點在上沿。
- column-reverse：主軸爲垂直方向，起點在下沿。
3.2 flex-wrap屬性
默認情況下，項目都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三個值。
（1）nowrap（默認）：不換行。
（2）wrap：換行，第一行在上方。
（3）wrap-reverse：換行，第一行在下方。
3.3 flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
3.4 justify-content屬性
justify-content屬性定義了項目在主軸上的對齊方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5個值，具體對齊方式與軸的方向有關。下面假設主軸爲從左到右。
- flex-start（默認值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊，項目之間的間隔都相等。
- space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
3.5 align-items屬性
align-items屬性定義項目在交叉軸上如何對齊。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。
- flex-start：交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊。
- center：交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊。
- stretch（默認值）：如果項目未設置高度或設爲auto，將佔滿整個容器的高度。
3.6 align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
該屬性可能取6個值。
- flex-start：與交叉軸的起點對齊。
- flex-end：與交叉軸的終點對齊。
- center：與交叉軸的中點對齊。
- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
- space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（默認值）：軸線佔滿整個交叉軸。
四、項目的屬性
以下6個屬性設置在項目上。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
4.1 order屬性
order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。
.item {
order: <integer>;
}
4.2 flex-grow屬性
flex-grow屬性定義項目的放大比例，默認爲0，即如果存在剩餘空間，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有項目的flex-grow屬性都爲1，則它們將等分剩餘空間（如果有的話）。如果一個項目的flex-grow屬性爲2，其他項目都爲1，則前者佔據的剩餘空間將比其他項多一倍。
4.3 flex-shrink屬性
flex-shrink屬性定義了項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性爲0，其他項目都爲1，則空間不足時，前者不縮小。
負值對該屬性無效。
4.4 flex-basis屬性
flex-basis屬性定義了在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以設爲跟width或height屬性一樣的值（比如350px），則項目將佔據固定空間。
4.5 flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因爲瀏覽器會推算相關值。
4.6 align-self屬性
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
三、CSS3 transform 屬性
實例
旋轉 div 元素：
div { transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
1、屬性定義及使用說明
Transform屬性應用於元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。
2、語法
transform: none|transform-functions;
| 值 | 描述 |
|---|---|
| none | 定義不進行轉換。 |
| matrix(n,n,n,n,n,n) | 定義 2D 轉換，使用六個值的矩陣。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉換，使用 16 個值的 4x4 矩陣。 |
| translate(x,y) | 定義 2D 轉換。 |
| translate3d(x,y,z) | 定義 3D 轉換。 |
| translateX(x) | 定義轉換，只是用 X 軸的值。 |
| translateY(y) | 定義轉換，只是用 Y 軸的值。 |
| translateZ(z) | 定義 3D 轉換，只是用 Z 軸的值。 |
| scale(x[,y]?) | 定義 2D 縮放轉換。 |
| scale3d(x,y,z) | 定義 3D 縮放轉換。 |
| scaleX(x) | 通過設置 X 軸的值來定義縮放轉換。 |
| scaleY(y) | 通過設置 Y 軸的值來定義縮放轉換。 |
| scaleZ(z) | 通過設置 Z 軸的值來定義 3D 縮放轉換。 |
| rotate(angle) | 定義 2D 旋轉，在參數中規定角度。 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉。 |
| rotateX(angle) | 定義沿着 X 軸的 3D 旋轉。 |
| rotateY(angle) | 定義沿着 Y 軸的 3D 旋轉。 |
| rotateZ(angle) | 定義沿着 Z 軸的 3D 旋轉。 |
| skew(x-angle,y-angle) | 定義沿着 X 和 Y 軸的 2D 傾斜轉換。 |
| skewX(angle) | 定義沿着 X 軸的 2D 傾斜轉換。 |
| skewY(angle) | 定義沿着 Y 軸的 2D 傾斜轉換。 |
| perspective(n) | 爲 3D 轉換元素定義透視視圖。 |
一、旋轉rotate
rotate(<angle>) ：通過指定的角度參數對原元素指定一個2D rotation（2D 旋轉），需先有transform-origin屬性的定義。transform-origin定義的是旋轉的基點，其中angle是指旋轉角度，如果設置的值爲正數表示順時針旋轉，如果設置的值爲負數，則表示逆時針旋轉。如：transform:rotate(30deg):
二、移動translate
移動translate我們分爲三種情況：translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；translateX(x)僅水平方向移動（X軸移動）；translateY(Y)僅垂直方向移動（Y軸移動），具體使用方法如下：
1、translate(<translation-value>[, <translation-value>]) ：通過矢量[tx, ty]指定一個2D translation，tx 是第一個過渡值參數，ty 是第二個過渡值參數選項。如果 未被提供，則ty以 0 作爲其值。也就是translate(x,y),它表示對象進行平移，按照設定的x,y參數值,當值爲負數時，反方向移動物體，其基點默認爲元素 中心點，也可以根據transform-origin進行改變基點。如transform:translate(100px,20px):
2、translateX(<translation-value>) ： 通過給定一個X方向上的數目指定一個translation。只向x軸進行移動元素，同樣其基點是元素中心點，也可以根據transform-origin改變基點位置。如：transform:translateX(100px):
3、translateY(<translation-value>) ：通過給定Y方向的數目指定一個translation。只向Y軸進行移動，基點在元素心點，可以通過transform-origin改變基點位置。如：transform:translateY(20px):
三、縮放scale
縮放scale和移動translate是極其相似，他也具有三種情況：scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點和基數，其中心點就是元素的中心位置，縮放基數爲1，如果其值大於1元素就放大，反之其值小於1，元素縮小。下面我們具體來看看這三種情況具體使用方法：
1、scale(<number>[, <number>])：提供執行[sx,sy]縮放矢量的兩個參數指定一個2D scale（2D縮放）。如果第二個參數未提供，則取與第一個參數一樣的值。scale(X,Y)是用於對元素進行縮放，可以通過transform-origin對元素的基點進行設置，同樣基點在元素中心位置；基中X表示水平方向縮放的倍數，Y表示垂直方向的縮放倍數，而Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。並以X爲準。如：transform:scale(2,1.5):
2、scaleX(<number>) ： 使用 [sx,1] 縮放矢量執行縮放操作，sx爲所需參數。scaleX表示元素只在X軸(水平方向)縮放元素，他的默認值是(1,1)，其基點一樣是在元素的中心位置，我們同樣是通過transform-origin來改變元素的基點。如：transform:scaleX(2):
3、scaleY(<number>) ： 使用 [1,sy] 縮放矢量執行縮放操作，sy爲所需參數。scaleY表示元素只在Y軸（垂直方向）縮放元素，其基點同樣是在元素中心位置，可以通過transform-origin來改變元素的基點。如transform:scaleY(2):
四、扭曲skew
扭曲skew和translate、scale一樣同樣具有三種情況：skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形），具體使用如下：
1、skew(<angle> [, <angle>]) ：X軸Y軸上的skew transformation（斜切變換）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值爲0，也就是Y軸方向上無斜切。skew是用來對元素進行扭曲變行，第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。其中第二個參數是可選參數，如果沒有設置第二個參數，那麼Y軸爲0deg。同樣是以元素中心爲基點，我們也可以通過transform-origin來改變元素的基點位置。如：transform:skew(30deg,10deg):
2、skewX(<angle>) ： 按給定的角度沿X軸指定一個skew transformation（斜切變換）。skewX是使元素以其中心爲基點，並在水平方向（X軸）進行扭曲變行，同樣可以通過transform-origin來改變元素的基點。如：transform:skewX(30deg)
3、skewY(<angle>) ： 按給定的角度沿Y軸指定一個skew transformation（斜切變換）。skewY是用來設置元素以其中心爲基點並按給定的角度在垂直方向（Y軸）扭曲變形。同樣我們可以通過transform-origin來改變元素的基點。如：transform:skewY（10deg）
五、矩陣matrix
matrix(<number>, <number>, <number>, <number>, <number>, <number>) ： 以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當於直接應用一個[a b c d e f]變換矩陣。就是基於水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數學中的矩陣，我在這裏只是簡單的說一下CSS3中的transform有這麼一個屬性值，如果有感興趣的朋友可以去了解更深層次的martix使用方法，這裏就不多說了。
改變元素基點transform-origin
前面我們多次提到transform-origin這個東東，他的主要作用就是讓我們在進行transform動作之前可以改變元素的基點位置，因爲我們元素默認基點就是其中心位置，換句話說我們沒有使用transform-origin改變元素基點位置的情況下，transform進行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置進行變化的。但有時候我們需要在不同的位置對元素進行這些操作，那麼我們就可以使用transform-origin來對元素進行基點位置改變，使元素基點不在是中心位置，以達到你需要的基點位置。下面我們主要來看看其使用規則：
transform-origin(X,Y):用來設置元素的運動的基點（參照點）。默認點是元素的中心點。其中X和Y的值可以是百分值,em,px，其中X也可以是字符參數值left,center,right；Y和X一樣除了百分值外還可以設置字符值top,center,bottom，這個看上去有點像我們background-position設置一樣；下面我列出他們相對應的寫法：
1、top left | left top 等價於 0 0 | 0% 0%
2、top | top center | center top 等價於 50% 0
3、right top | top right 等價於 100% 0
4、left | left center | center left 等價於 0 50% | 0% 50%
5、center | center center 等價於 50% 50%（默認值）
6、right | right center | center right 等價於 100% 50%
7、bottom left | left bottom 等價於 0 100% | 0% 100%
8、bottom | bottom center | center bottom 等價於 50% 100%
9、bottom right | right bottom 等價於 100% 100%
其中 left,center right是水平方向取值，對應的百分值爲left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一個值，表示垂直方向值不變，我們分別來看看以下幾個實例
(1)transform-origin:(left,top):
(2)transform-origin:right
(3)transform-origin(25%,75%)
更多的改變中心基點辦法，大家可以在本地多測試一下，多體會一下，這裏還要提醒大家一點的是，transform-origin並不是transform中的屬性值，他具有自己的語法，前面我也說過了，說簡單一點就是類似於我們的background-position的用法，但又有其不一樣，因爲我們background-position不需要區別瀏覽器內核不同的寫法，但transform-origin跟其他的css3屬性一樣，我們需要在不同的瀏覽內核中加上相應的前綴。
四、CSS3 transition 屬性
實例
將鼠標懸停在一個 div 元素上，逐步改變表格的寬度從 100px 到 300px：:
div { width:100px;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover {
width:300px;
}
1、屬性定義及使用說明
transition 屬性設置元素當過渡效果，四個簡寫屬性爲：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注意： 始終指定transition-duration屬性，否則持續時間爲0，transition不會有任何效果。
2、語法
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS屬性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的轉速曲線 |
| transition-delay | 定義transition效果開始的時候 |
一、transition-property:
語法：
transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*
transition-property是用來指定當元素其中一個屬性改變時執行transition效果，其主要有以下幾個值：none(沒有屬性改變)；all（所有屬性改變）這個也是其默認值；indent（元素屬性名）。當其值爲none時，transition馬上停止執行，當指定爲all時，則元素產生任何屬性值變化時都將執行transition效果，ident是可以指定元素的某一個屬性值。其對應的類型如下：
1、color: 通過紅、綠、藍和透明度組件變換（每個數值處理）如：background-color,border-color,color,outline-color等css屬性；
2、length: 真實的數字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等屬性；
3、percentage:真實的數字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等屬性；
4、integer離散步驟（整個數字），在真實的數字空間，以及使用floor()轉換爲整數時發生 如：outline-offset,z-index等屬性；
5、number真實的（浮點型）數值，如：zoom,opacity,font-weight,等屬性；
6、transform list:詳情請參閱：《CSS3 Transform》
7、rectangle:通過x, y, width 和 height（轉爲數值）變換，如：crop
8、visibility: 離散步驟，在0到1數字範圍之內，0表示“隱藏”，1表示完全“顯示”,如：visibility
9、shadow: 作用於color, x, y 和 blur（模糊）屬性,如：text-shadow
10、gradient: 通過每次停止時的位置和顏色進行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數值以便執行動畫,如：background-image
11、paint server (SVG): 只支持下面的情況：從gradient到gradient以及color到color，然後工作與上面類似
12、space-separated list of above:如果列表有相同的項目數值，則列表每一項按照上面的規則進行變化，否則無變化
13、a shorthand property: 如果縮寫的所有部分都可以實現動畫，則會像所有單個屬性變化一樣變化
具體什麼css屬性可以實現transition效果，在W3C官網中列出了所有可以實現transition效果的CSS屬性值以及值的類型，大家可以點這裏瞭解詳情。這裏需要提醒一點是，並不是什麼屬性改變都爲觸發transition動作效果，比如頁面的自適應寬度，當瀏覽器改變寬度時，並不會觸發transition的效果。但上述表格所示的屬性類型改變都會觸發一個transition動作效果。
二、transition-duration:
語法：
transition-duration ： <time> [, <time>]*
transition-duration是用來指定元素 轉換過程的持續時間，取值：<time>爲數值，單位爲s（秒）或者ms(毫秒),可以作用於所有元素，包括:before和:after僞元素。其默認值是0，也就是變換時是即時的。
三、transition-timing-function:
語法：
transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
取值：
transition-timing-function的值允許你根據時間的推進去改變屬性值的變換速率，transition-timing-function有6個可能值：
1、ease：（逐漸變慢）默認值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
2、linear：（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).
4、ease-out：（減速），ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（該值允許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。所有值需在[0, 1]區域內，否則無效。
其是cubic-bezier爲通過貝賽爾曲線來計算“轉換”過程中的屬性值，如下曲線所示，通過改變P1(x1, y1)和P2(x2, y2)的座標可以改變整個過程的Output Percentage。初始默認值爲default.
其他幾個屬性的示意圖：
四、transition-delay:
語法：
transition-delay ： <time> [, <time>]*
transition-delay是用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行transition效果，其取值：<time>爲數值，單位爲s（秒）或者ms(毫秒)，其使用和transition-duration極其相似，也可以作用於所有元素，包括:before和:after僞元素。 默認大小是"0"，也就是變換立即執行，沒有延遲。
有時我們不只改變一個css效果的屬性,而是想改變兩個或者多個css屬性的transition效果，那麼我們只要把幾個transition的聲明串在一起，用逗號（“，”）隔開，然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點：transition-delay與transition-duration的值都是時間，所以要區分它們在連寫中的位置，一般瀏覽器會根據先後順序決定，第一個可以解析爲時間的怭值爲transition-duration第二個爲transition-delay。
綜合上述我們可以給transition一個速記法：transition: <property> <duration> <animation type> <delay>如下圖所示：
五、CSS3 animation 屬性
實例
使用簡寫屬性，將動畫與 div 元素綁定：
div{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove{
from {
left:0px;
}
to {
left:200px;
}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
<p><strong>註釋：</strong>Internet Explorer 9 以及更早的版本不支持 animation 屬性。</p>
在開始介紹Animation之前我們有必要先來了解一個特殊的東西，那就是"Keyframes",我們把他叫做“關鍵幀”，玩過flash的朋友可能對這個東西並不會陌生。下面我們就一起來看看這個“Keyframes”是什麼東西。前面我們在使用transition製作一個簡單的transition效果時，我們包括了初始屬性和最終屬性，一個開始執行動作時間和一個延續動作時間以及動作的變換速率，其實這些值都是一箇中間值，如果我們要控制的更細一些，比如說我要第一個時間段執行什麼動作，第二個時間段執行什麼動作（換到flash中說，就是第一幀我要執行什麼動作，第二幀我要執行什麼動作），這樣我們用Transition就很難實現了，此時我們也需要這樣的一個“關鍵幀”來控制。那麼CSS3的Animation就是由“keyframes”這個屬性來實現這樣的效果。下面我們一起先來看看Keyframes:
Keyframes具有其自己的語法規則，他的命名是由"@keyframes"開頭，後面緊接着是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。對於一個"@keyframes"中的樣式規則是由多個百分比構成的，如“0%”到"100%"之間，我們可以在這個規則中創建多個百分比，我們分別給每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動，改變元素顏色，位置，大小，形狀等，不過有一點需要注意的是，我們可以使用“fromt”“to”來代表一個動畫是從哪開始，到哪結束，也就是說這個 "from"就相當於"0%"而"to"相當於"100%",值得一說的是，其中"0%"不能像別的屬性取值一樣把百分比符號省略，我們在這裏必須加上百分符號（“%”）如果沒有加上的話，我們這個keyframes是無效的，不起任何作用。因爲keyframes的單位只接受百分比值。
Keyframes可以指定任何順序排列來決定Animation動畫變化的關鍵位置。其具體語法規則如下：
keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';
keyframes-blocks: [ keyframe-selectors block ]* ;
keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;
我把上面的語法綜合起來
@keyframes IDENT {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
to {
Properties:Properties value;
}
}
或者全部寫成百分比的形式：
@keyframes IDENT {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}
其中IDENT是一個動畫名稱，你可以隨便取，當然語義化一點更好，Percentage是百分比值，我們可以添加許多個這樣的百分比，Properties爲css的屬性名，比如說left,background等，value就是相對應的屬性的屬性值。值得一提的是，我們from和to 分別對應的是0%和100%。這個我們在前面也提到過了。到目前爲止支技animation動畫的只有webkit內核的瀏覽器，所以我需要在上面的基礎上加上-webkit前綴，據說Firefox5可以支持css3的 animation動畫屬性。
CSS3的animation類似於transition屬性，他們都是隨着時間改變元素的屬性值。他們主要區別是transition需要觸發一個事件(hover事件或click事件等)纔會隨時間改變其css屬性；而animation在不需要觸發任何事件的情況下也可以顯式的隨着時間變化來改變元素css的屬性值，從而達到一種動畫的效果。這樣我們就可以直接在一個元素中調用animation的動畫屬性,基於這一點，css3的animation就需要明確的動畫屬性值，這也就是回到我們上面所說的，我們需要keyframes來定義不同時間的css屬性值,達到元素在不同時間段變化的效果。
下面我們來看看怎麼給一個元素調用animation屬性
.demo1 {
width: 50px;
height: 50px;
margin-left: 100px;
background: blue;
-webkit-animation-name:'wobble';/*動畫屬性名，也就是我們前面keyframes定義的動畫名*/
-webkit-animation-duration: 10s;/*動畫持續時間*/
-webkit-animation-timing-function: ease-in-out; /*動畫頻率，和transition-timing-function是一樣的*/
-webkit-animation-delay: 2s;/*動畫延遲時間*/
-webkit-animation-iteration-count: 10;/*定義循環資料，infinite爲無限次*/
-webkit-animation-direction: alternate;/*定義動畫方式*/
}
CSS Animation動畫效果將會影響元素相對應的css值，在整個動畫過程中，元素的變化屬性值完全是由animation來控制，動畫後面的會覆蓋前面的屬性值。如上面例子：因爲我們這個demo只是在不同的時間段改變了demo1的背景色和左邊距，其默認值是：margin-left:100px;background: blue；但當我們在執行動畫0%時，margin-left:100px,background:green；當執行到40%時，屬性變成了：margin-left:150px;background:orange;當執行到60%時margin-left:75px;background:blue;當動畫 執行到100%時：margin-left:100px;background: red;此時動畫將完成，那麼margin-left和background兩個屬性值將是以100%時的爲主,他不會產生疊加效果，只是一次一次覆蓋前一次出將的css屬性。就如我們平時的css一樣，最後出現的權根是最大的。當動畫結束後，樣式回到默認效果。
我們可以看一張來自w3c官網有關於css3的animation對屬性變化的過程示意圖
1、語法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
| 值 | 描述 |
|---|---|
| animation-name | 指定要綁定到選擇器的關鍵幀的名稱 |
| animation-duration | 動畫指定需要多少秒或毫秒完成 |
| animation-timing-function | 設置動畫將如何完成一個週期 |
| animation-delay | 設置動畫在啓動前的延遲間隔。 |
| animation-iteration-count | 定義動畫的播放次數。 |
| animation-direction | 指定是否應該輪流反向播放動畫。 |
| animation-fill-mode | 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。 |
| animation-play-state | 指定動畫是否正在運行或已暫停。 |
| initial | 設置屬性爲其默認值。 閱讀關於 initial的介紹。 |
| inherit | 從父元素繼承屬性。 閱讀關於 initinherital的介紹。 |
一、animation-name:
語法：
animation-name: none | IDENT[,none | IDENT]*;
取值說明：
animation-name:是用來定義一個動畫的名稱，其主要有兩個值：IDENT是由Keyframes創建的動畫名，換句話說此處的IDENT要和Keyframes中的IDENT一致，如果不一致,將不能實現任何動畫效果；none爲默認值，當值爲none時，將沒有任何動畫效果。另外我們這個屬性跟前面所講的transition一樣，我們可以同時附幾個animation給一個元素，我們只需要用逗號“，”隔開。
二、animation-duration：
語法：
animation-duration: <time>[,<time>]*
取值說明：
animation-duration是用來指定元素播放動畫所持續的時間長，取值:<time>爲數值，單位爲s （秒.）其默認值爲“0”。這個屬性跟transition中的transition-duration使用方法是一樣的。
三、animation-timing-function:
語法：
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
取值說明：
animation-timing-function:是指元素根據時間的推進來改變屬性值的變換速率，說得簡單點就是動畫的播放方式。他和transition中的transition-timing-function一樣，具有以下六種變換方式：ease;ease-in;ease-in-out;linear;cubic-bezier。具體的使用方法大家可以點這裏，查看其中transition-timing-function的使用方法。
四、animation-delay:
語法：
animation-delay: <time>[,<time>]*
取值說明：
animation-delay:是用來指定元素動畫開始時間。取值爲<time>爲數值，單位爲s(秒)，其默認值也是0。這個屬性和transition-delayy使用方法是一樣的。
五、animation-iteration-count
語法：
animation-iteration-count:infinite | <number> [, infinite | <number>]*
取值說明：
animation-iteration-count是用來指定元素播放動畫的循環次數，其可以取值<number>爲數字，其默認值爲“1”；infinite爲無限次數循環。
六、animation-direction
語法：
animation-direction: normal | alternate [, normal | alternate]*
取值說明：
animation-direction是用來指定元素動畫播放的方向，其只有兩個值，默認值爲normal，如果設置爲normal時，動畫的每次循環都是向前播放；另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。
七、animation-play-state
語法：
animation-play-state:running | paused [, running | paused]*
取值說明：
animation-play-state主要是用來控制元素動畫的播放狀態。其主要有兩個值，running和paused其中running爲默認值。他們的作用就類似於我們的音樂播放器一樣，可以通過paused將正在播放的動畫停下了，也可以通過running將暫停的動畫重新播放，我們這裏的重新播放不一定是從元素動畫的開始播放，而是從你暫停的那個位置開始播放。另外如果暫時了動畫的播放，元素的樣式將回到最原始設置狀態。這個屬性目前很少內核支持，所以只是稍微提一下。
上面我們分別介紹了animation中的各個屬性的語法和取值，那麼我們綜合上面的內容可以給animation屬性一個速記法：
animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*
如下圖所示
那麼到此爲止，我們主要一起學習了有關animation的理論知識，下面我們一起來看兩個實例製作過程，來加強對animation的實踐能力
通過上面，我想大家對CSS3的Transition屬性的使用有一定的概念存在了，下面爲了加強大家在這方面的使用，我們一起來看下面的DEMO。我們通過實踐來鞏固前面的理論知識，也通過實踐來加強transition的記憶。
最後，提一下，animation的不同狀態下的連續動畫的連寫方式：
<div class="element">小火箭</div>
.element { animation: fadeIn 1s, float .5s 1s infinite; } /* 我淡出, 需要1秒；我1秒後開始無限漂浮 */
還有就是標籤嵌套與獨立動畫：
<div class="element-wrap"><div class="element">小火箭</div></div>
.element-wrap { animation: fadeIn 1s; } /* 我淡出, 需要1秒 */
.element { animation: float .5s 1s infinite; } /* 我1秒後開始無限漂浮 */
有人可能會奇怪了。animation本身就支持多動畫並行，你還搞個標籤嵌套，沒有任何使用的理由啊！沒錯，單純看我們這個例子，確實是這樣。但是：
① 提取公用動畫
這類多屏動畫是有N多元素同時執行不同的動畫。比方說，火箭是淡出，然後上下漂浮；火箭的火焰是淡出，然後大小變化；黑洞是淡出，然後左右隨波。你如何實現？
如果純粹藉助animation語法，應該是：
.element1 { animation: fadeIn 1s, float .5s 1s infinite; } /* 我淡出, 需要1秒；我1秒後開始無限漂浮 */
.element2 { animation: fadeIn 1s, size .5s 1s infinite; } /* 我淡出, 需要1秒；我1秒後開始大小變化 */
.element3 { animation: fadeIn 1s, move .5s 1s infinite; } /* 我淡出, 需要1秒；我1秒後開始左右移動 */
可以看到，淡出是公用的動畫效果，我們可以藉助嵌套標籤，實現公用語法的合併，方面後期維護：
.element-wrap { animation: fadeIn 1s; } /* 大家都1秒淡出 */
.element1 { animation: float .5s 1s infinite; } /* 我1秒後無限漂浮 */
.element2 { animation: size .5s 1s infinite; } /* 我1秒後忽大忽小 */
.element3 { animation: move .5s 1s infinite; } /* 我1秒後左右移動 */
②避免變換衝突
有個元素動畫是邊360度旋轉、邊放大(從0放大到100%)，像這種具有典型特徵的動畫我們顯然要獨立提取與公用的：
@keyframes spin { /* transform: rotate... */ }
@keyframes zoomIn { /* transform: scale... */ }
好了，現在問題來了，變放大邊旋轉：
.element { animation: spin 1s, zoomIn 1s; } /* 旋轉：啊，完蛋啦，我被放大覆蓋啦！ */
由於都是使用transform, 發生了殘忍的覆蓋。當然，有好事的人會說，你使用zoom不就好了！確實，如果只是移動端，使用zoom確實棒棒噠！但是，我們這個企業活動，PC是主戰場，因此，FireFox瀏覽器（FF不識zoom）是不能無視的。
怎麼辦？重新建一個名爲spinZoomIn的動畫關鍵幀描述還是？
對啊，你直接外面套一層標籤不就萬事大吉了 
.element-wrap { animation: spin 1s; } /* 我轉轉轉 */
.element { animation: zoomIn 1s; } /* 我大大大 */
對於transform-origin屬性：
#job_page3 .j3_01 {
-webkit-transform-origin: 50% 75%;
-webkit-animation: scale3 0.8s both;
}
可以這麼寫，就可以在只是改變基點的情況下，運用同一個動畫，非常方便。
六、HTML 5： Canvas 和 SVG
Canvas 和 SVG 都允許您在瀏覽器中創建圖形，但是它們在根本上是不同的。
SVG
SVG 是一種使用 XML 描述 2D 圖形的語言。
SVG 基於 XML，這意味着 SVG DOM 中的每個元素都是可用的。您可以爲某個元素附加 JavaScript 事件處理器。
在 SVG 中，每個被繪製的圖形均被視爲對象。如果 SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。
Canvas
Canvas 通過 JavaScript 來繪製 2D 圖形。
Canvas 是逐像素進行渲染的。
在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。
Canvas 與 SVG 的比較
下表列出了 canvas 與 SVG 之間的一些不同之處。
Canvas
- 依賴分辨率
- 不支持事件處理器
- 弱的文本渲染能力
- 能夠以 .png 或 .jpg 格式保存結果圖像
- 最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
SVG
- 不依賴分辨率
- 支持事件處理器
- 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
- 複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
- 不適合遊戲應用
七、CSS3 box-shadow 屬性
實例
向 div 元素添加陰影：
div {
box-shadow: 10px 10px 5px #888888;
}
語法
box-shadow: h-shadow v-shadow blur spread color inset;
注意：boxShadow 屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規定。省略長度的值是 0。
| 值 | 描述 |
|---|---|
| h-shadow | 必需的。水平陰影的位置。允許負值 |
| v-shadow | 必需的。垂直陰影的位置。允許負值 |
| blur | 可選。模糊距離 |
| spread | 可選。陰影的大小 |
| color | 可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表 |
| inset | 可選。從外層的陰影（開始時）改變陰影內側陰影 |
八、CSS border-radius 新玩法(含可視化生成工具)
這個 CSS 屬性對於前端人員一定不陌生，一直以來都把它當作矩形圓角使用，然而，對於喜歡創新的設計師來說，這是不夠的，我們要最大化利用 border-radius，讓它玩得更出色。
先來看看截圖，這就是用 border-radius 實現的，而且並不複雜。
首先我們來爲設計師簡單普及下 border-radius 一般寫法，代碼如下：
.box{
border-radius: 30%; /* 也可以用PX代替 */
}
當這樣寫的時候，矩形的四角就會自動變爲相應數值的圓角，如下圖：
因爲我們只輸入了一個數值，所以所有角都會被四捨五入，若要固定值可以使用 px，百分比(%)就使用 rem, em這些單位。
讓我們看看「border-radius: 110px」與「border-radius: 30%」的矩形會是什麼樣的，請看下圖例子：
注意右圖的圓角是不對稱的，後面文章我們再來看看。
用4個值的樣式
當設置多個 border-radius 數值時，從左上角開始順時針設置，您還可以使用百分比單位，甚至可以與固定值混合使用。
用8個值的樣式（這裏變得有趣了）
Border-radius 最多可以使用8個數值，這就可以給設計師帶來更多創意空間了，注意，需要作用斜槓「 / 」來分隔4個值，這是規範。
如果在斜槓前後設置一個值，則斜槓前面的值設置水平半徑，斜槓後面的值設置垂直半徑。如果沒有斜槓，則該值將兩個半徑設置爲相等。
來自：W3C
因此，斜槓之前的值定義水平長度，而斜槓之後的值定義垂直長度。但是，這是什麼意思？建議看下圖更好的幫你理解。
使用斜槓和不使用斜槓的區別
上圖是比較「border-radius: 4em 8em」與「border-radius: 4em / 8em」的結果。請記住，如果要一個正方形變爲圓形，那麼可以直接這樣寫 「border-radius: 50%」 即可。
然後，你可以設置8個不同數值，就會得到一個像「有機體」的形狀。
其實是四個重疊的橢圓，構成最終的形狀
不要擔心，這裏有個在線可視化演示
你可以隨意設置寬、高，以及能過鼠標拖拽來改變8個角的數值，這樣就可以很方便的查看變化。
花式半徑在線產生器：https://9elements.github.io/fancy-border-radius/
今天的CSS屬性就介紹到這裏，希望你對border-radius有更多深刻的認識，並適當運用到設計項目上。