漸變，可以在兩個或多個指定的顏色之間顯示平穩的過渡。
相容性：
ie10+、chrome10、firefox3.6、safari5.1、opear 11.6
沿著一根軸改變顏色，顏色從起點到終點進行順序漸變（從一邊拉向另一邊）。
語法：（字首不同，其他一致）
background：linear-gradient (color1, color2, ...)background: -webkit-linear-gradient(white,blue);
background: -moz-linear-gradient(white,blue);
background: -o-linear-gradient(white,blue);
background: linear-gradient(white,blue);
background: -webkit-linear-gradient(開始方向, color1, color2, ...);
background: -moz-linear-gradient(結束方向,color1, color2, ...);
background: -o-linear-gradient(結束方向,color1, color2, ...);
background: linear-gradient(to 結束方向,color1, color2, ...);
background: -webkit-linear-gradient(left,red,blue);
background: -moz-linear-gradient(right,red,blue);
background: -o-linear-gradient(right,red,blue);
background: linear-gradient(to right,red,blue);
background: -webkit-linear-gradient(開始角, color1, color2, ...);
background: -moz-linear-gradient(結束角,color1, color2, ...);
background: -o-linear-gradient(結束角,color1, color2, ...);
background: linear-gradient(to 結束方向,color1, color2, ...);
background: -webkit-linear-gradient( left top, red, yellow, blue);
background: -moz-linear-gradient( right bottom, red, yellow, blue);
background: -o-linear-gradient( right bottom, red, yellow, blue);
background: linear-gradient(to right bottom, red, yellow, blue);
background: linear-gradient(角度,color1, color2, ...);
例項：
background: -webkit-linear-gradient(135deg, red, yellow, blue);
background: -moz-linear-gradient(135deg, red, yellow, blue);
background: -o-linear-gradient(135deg, red, yellow, blue);
background: linear-gradient(135deg, red, yellow, blue);
使用百分比值，控制顏色長度，從0%到100%。
第乙個顏色不寫，預設0%；最後乙個不寫，預設100%。
語法：（字首不同，其他一致）
background: linear-gradient(color1 %, color2 %, ...);background: -webkit-linear-gradient(90deg, red 0%, yellow 30%, blue);
background: -moz-linear-gradient(90deg, red 10%, yellow 30%, blue);
background: -o-linear-gradient(90deg, red 10%, yellow 30%, blue);
background: linear-gradient(90deg, red 00%, yellow 30%, blue);
background: repeating-linear-gradient(角度,color1, color2, ...);background: -webkit
-repeating
-linear
-gradient(90deg, red 0
%, yellow 10
%, blue 20
%); background: -moz
-repeating
-linear
-gradient(90deg, red 10
%, yellow 10
%, blue 20
%); background: -o
-repeating
-linear
-gradient(90deg, red 10
%, yellow 10
%, blue 20
%); background: repeating
-linear
-gradient(90deg, red 00
%, yellow 10
%, blue 20
%);
語法：（字首不同，其他一致）
background: radial-gradient(color1,color2...)第乙個顏色不寫，預設0%；最後乙個不寫，預設100%。
語法：（字首不同，其他一致）
background: radial-gradient(color1 %, color2 %, ...);background: radial-gradient(形狀，color1, color2, ...);ellipse —— 橢圓（預設）
語法：（字首不同，其他一致）
background: repeating-radial-gradient(color1 %, color2 %, ...);CSS3筆記 Border radius的形成原理
參考文章 一 前言 最近自己寫了乙個導航欄，馬馬虎虎就是嘖個樣紙 其中的圓角做了好久，就是嘖個 既然用到了，我就在這總結一下圓角border radius的用法，閒話不多說，進入正題。二 border radius的幾種常用的寫法 border radius 20px 或border radius ...
CSS3 筆記3 彈性盒布局flex
使用css3中的乙個box flex屬性就可以隨著瀏覽器視窗的改變而自適應。彈性盒布局是在盒布局的基礎上進行自適應。彈性盒布局相容性 webkit box flex 1 safara瀏覽器 chrome瀏覽器 moz box flex 1 firefox瀏覽器 數字1 是指所佔的比例份數。比如第乙個...
CSS3筆記 3 過渡效果 動畫 變形
語法 transition duration time 語法 transition property none all property 語法 transition delay time 語法 transition timing function linear ease ease in ease o...