[持續更新]CSS3學習筆記（二）漸變&圓角&陰影&變換&動畫
1. 顏色模式
在網頁中常見的顏色模式有：RGB，HSLA。
RGB 大家不陌生，分別代表red，green，blue。使用6位16進位制數表示。#00FF00；
RGBA 就說多了一個Aplha透明通道。這個數值用0~1的數字來表示。rbga（255，255，255，0.3）；
HSLA 分別代表色調Hue，飽和度Saturation，亮度Light，透明度Alpha。
但是在實際應用中，通常是HSLA調整顏色，之後轉換成rbg的顏色模式表示。
在相容方面：IE8及以下版本不支援HSLA顏色表示法。
IE6及之前的版本不支援RGBA的，可以使用IE特有的濾鏡來新增效果。
如果是圖片，指定透明度使用opacity屬性，該屬性值也是0~1的數。
.image{
filter:Alpha(Opacity);/IE相容程式碼/
opacity:0.2
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>2. 漸變
CSS3中新增的漸變可以說是使用CSS來代替圖片完成美化效果，減少圖片使用。
漸變分為線性漸變（linear-gradient），和發射漸變（radial-grandient）。
線性漸變語法：
background：linear-gradient(方向，開始顏色，結束顏色);
方向預設是從上到下漸變，可以指定left/to right, 還可以指定角度0deg, 或者左下角bottom left等，顏色可以指定多個，還可以對每部分顏色指定寬度等;
background：linear-gradient(red,blue); background：linear-gradient(left,red,blue); background：linear-gradient(45deg,red,blue); background：linear-gradient(red,blue); background：linear-gradient(45deg,red,blue); background：linear-gradient(bottom left, red,blue); background：linear-gradient(left, red 15%,orange 15%,blue 70%);<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
另外，該屬性需要寫明瀏覽器特有的標識，下面給出一個彩虹色的css漸變。
. linear-gradient {
background:-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>放射漸變跟線性漸變差不多，第一個引數為中心店位置，預設為中心。
#radial-gradient {
width: 300px;
height: 300px;
float: left;
border-radius:50%;
background:-webkit-radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet);
background:-o-radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet);
background:-moz-radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet);
background:radial-gradient(bottom left,red,orange,yellow,green,blue,indigo,violet);
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>在實際的工作中，漸變變得很有用。比如Bootstrap的按鈕背景色就是漸變色，這樣使得按鈕有一種立體感，使人更容易點選。
3. 圓角和陰影
圓角屬性：border-radius，該屬性的值可以是畫素，也可以是百分比。注意的是，當元素長寬比為1:1時，圓角值為50%即為原型，並且圓角值不會比50%更大。圓角的值不能超過長寬比的一半。
.radius {
border-radius:20px;/4個角都是相同的值/
-moz- border-radius:20px;/支援老版本FF/
-webkit- border-radius:20px;/支援老版本webkit核心/
}也可指定4個角不同的圓角值。
.radius {
border-top-left-radius:20px;/左上/
border-top-right-radius:20px;/右上/
border-bottom-left-radius:20px;/左下/
border-bottom-right-radius:20px;/右下/
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>邊框陰影跟之前講的文字陰影很像。IE6~8不支援。
語法：box-shadow:{color 水平偏移垂直偏移 模糊距離 陰影尺寸 inset};
屬性ps的同學可能會對這幾個值比較熟悉，因為這些值也是ps中設定陰影的必須值。簡單來說：
inset 內部陰影，可選為outset 外部陰影。決定陰影是對外還是對內。
水平偏移：陰影向右便宜的距離，負值表示向左。
陰影尺寸：就是陰影向外延伸出去的長度。
模糊距離：相當於是對陰影尺寸做了漸變，漸變長度就是設定的值。
另外，和邊框不同的是，陰影是不佔空間的。
3．變換和動畫
CSS3中大家瞭解最多的要數其新增的變換和動畫效果，新的屬性可是實現以前只有javascript才能實現的效果，簡化了網頁編寫的工作，提升了開發效率，當然也是十分的酷炫，而且節省流量。
1. 變換（transform）
transform屬性有很多值：旋轉（rotate），扭曲（skew），位移（translate），縮放（scale）。
1.1 rotate旋轉變換
簡單的2D旋轉：會將元素按照中軸線順時針旋轉指定的角度。
.rotate {
transform:rotate(20deg);
-ms-transform:rotate(20deg);/* IE9 */
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>還可使用rotateX沿X軸向上旋轉，rotateY沿Y軸向上旋轉
.rotateX {
transform:rotateX(20deg);
-ms-transform:rotateX(20deg);/* IE9 */
-moz-transform:rotateX(20deg);
-webkit-transform:rotateX(20deg);
-o-transform:rotateX(20deg);
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>這裡要注意的是，我們直觀地感受就是在使用rotateX時，元素在縱向被壓縮了，其實是元素的上半部分向內凹陷，下半部分向外突出形成的一種旋轉效果。
複雜的3D效果：元素會沿著xyz軸構建向量，最後偏轉一定角度。
rotate3d {
transform:rotate3d(1,0,0,10deg);
-ms-transform:rotate3d(0,1,0,10deg);
-moz-transform:rotate3d(0,0,1,10deg);
-webkit-transform:rotate3d(1,1,1,10deg);
-o-transform:rotate3d(0,0,0,10deg);
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>這裡需要理解下：rotate3d共接受四個值，前三個值分別代表xyz是否旋轉，1代表旋轉，0代表不旋轉；最後一個是旋轉的角度。例子中的transform:rotate3d(1,0,0,10deg);其實就等價於transform:rotateX(10deg);當xyz軸都旋轉時，相當於整個模型旋轉。
這個還是比較抽象，需要具有一定的空間想象力。
不懂的可以看看這個：
http://jingyan.baidu.com/article/d621e8da0aa7192865913f05.html
1.2 skew扭曲變換
用過ps的同學會對這些熟悉些：
.skew {
transform:skew(30deg,10deg);
}該屬性接受兩個引數：第一個引數是元素的中軸線沿著當前的中軸線逆時針旋轉的角度，元素的水平線不變，第二個引數正好相反。
也可使用skewX,和skewY單一方向變換。
該屬性不支援3D效果。
1.3 scale比例縮放
按照比例縮放：
.scale {
transform:scale(1.1,0.8);
}該段程式碼表示元素按照原尺寸分別在橫向和縱向上放大到1.1，0.8倍。
也可使用scaleX，scaleY，scaleZ在單個方向上縮放，不過會造成拉伸，影象失真。
1.4 translate位移變換
translate就是平面上的xy軸位移
.translate {
transform:translate(100px,200px);
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>也可使用translateX，translateY，translateZ，當方向位移。
2. 漸變（transition）
.transition {
height: 200px;
transition:height 1.0s;
}
.transition:hover {
height: 500px;
}這個屬性有點類似jquery的animaite屬性，是一種簡單的動畫。
元素的高度200，當滑鼠在其上懸停時高度變為500，這是一個瞬間的效果，用了該屬性會是這個過程在1.0s內完成，這樣我們看到的就是一個動畫。
如果要同時改變多個屬性，使用逗號隔開。
transition: width 1.0s, height 1.0s;transition還可選擇多種動畫函式：
ease 逐漸變慢 預設；
linear 勻速
ease-in 加速
ease-out 減速
ease-in-out減速然後減速
cubic-bezier 自定義一個時間曲線
transition:all 0.5s ease-in-out 1s;/*1s表示動畫的延遲時間*/<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>3. 關鍵幀（@keyframes）
使用關鍵幀來完成動畫效果。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>animation</title>
<style type="text/css">
#keyframes{
width:200px;
height: 200px;
background-color: red;
float: left;
position: relative;
animation:myAnimate 5s infinite alternate;
-webkit-animation:myAnimate 5s infinite alternate;
}
@keyframes myAnimate {
0% {background-color: red;left: 0px; top: 0px;}
25% {background-color: red;left: 100px; top: 0px;}
50% {background-color: red;left: 100px; top: 100px;}
75% {background-color: red;left: 200px; top: 200px;}
100% {background-color: blue;left: 200px; top: 200px;}
}
@-webkit-keyframes myAnimate {
0% {background-color: red;left: 0px; top: 0px;}
25% {background-color: red;left: 100px; top: 0px;}
50% {background-color: red;left: 100px; top: 100px;}
75% {background-color: red;left: 200px; top: 200px;}
100% {background-color: blue;left: 200px; top: 200px;}
}
</style>
</head>
<body>
<div id="keyframes">
</div>
</body>
</html>屬性anmiation後面跟上動畫名，動畫執行一次的時間，動畫訓話的次數（infinite表示迴圈alertnate表示動畫完成之後反向執行），和動畫執行的速度（transition中的速度函式一致）。
@keyframes後面緊跟動畫名稱來定義動畫，定義動畫的每步執行操作。
也可為元素新增屬性：
animate-play-state：paused;/*running用於啟動動畫*/
-webkit-animate-play-state：paused;通過javascript容易來控制動畫的暫停。