1、顔色之RGBA
RGB是一種色彩標準，是由紅(R)、綠(G)、藍(B)的變化以及相互曡加來得到各式各樣的顔色。RGBA是在RGB的基礎上增加了控制alpha透明度的參數。
語法：
color：rgba(R,G,B,A)
以上R、G、B三個參數，正整數值的取值範圍爲：0 - 255。百分數值的取值範圍爲：0.0% - 100.0%。超出範圍的數值將被截至其最接近的取值極限。並非所有瀏覽器都支持使用百分數值。A爲透明度參數，取值在0~1之間，不可爲負值。
代碼示例：
background-color:rgba(100,120,60,0.5);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RGBA colors</title>
<style type="text/css">
body{background:url(1.png)}
p{
font-size:42px;
text-align:center;
font-weight:bold;
background:rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<p>背景半透明的？</p>
</body>
</html>2、漸變色彩
CSS3 Gradient 分爲線性漸變(linear)和徑向漸變(radial)。
由於不同的渲染引擎實現漸變的語法不同，這裡我們只針對線性漸變的 W3C 標準語法來分析其用法。
W3C 語法已經得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等瀏覽器的支持。
線性漸變：
參數：
第一個參數:指定漸變方向，可以用“角度”的關鍵詞或“英文”來表示：
| 角度 | 用英文 | 作用 |
| 0deg | to top | 從下向上 |
| 90deg | to right | 從左向右 |
| 180deg | to bottom | 從上向下 |
| 270deg | to left | 從右向左 |
| to top left | 右下角到左上角 | |
| to top right | 左下角到右上角 |
第一個參數省略時，默認爲“180deg”，等同於“to bottom”。
第二個和第三個參數，表示顔色的起始點和結束點，可以有多個顔色值。
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
效果圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gradient</title>
<style type="text/css">
p {
width: 400px;
height: 150px;
line-height: 150px;
text-align:center;
color: #000;
font-size:24px;
background-image:linear-gradient(to top left,red,orange,yellow,green,blue,indigo,violet);
}
</style>
</head>
<body>
<p>右下角向左上角的線性漸變背景</p>
</body>
</html>
