一、颜色 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之间，不可为负值。
二、渐变色 Gradient
Gradient 分为线性渐变(linear)和径向渐变(radial)。
1.线性渐变
语法：
线性渐变 linear-gradient (渐变方向角度，颜色的起始点和结束点(可以有2两至多个色值) )
参数：第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：
注：第一个参数省略时，默认为“180deg”，等同于“to bottom”。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Gradient </title> 9 <style> 10 #box { 11 width: 300px; 12 height: 100px; 13 text-align: center; 14 line-height: 100px; 15 background-image: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet); 16 } 17 </style> 18 </head> 19 20 <body> 21 22 23 <div id="box"> 24 从右到左的线性渐变背景 25 </div> 26 27 </body> 28 29 </html>
2.径向渐变
语法：
径向渐变 radial-gradient(shape size at position, start-color, ..., last-color);
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Gradient </title> 9 <style> 10 #box1 { 11 width: 100px; 12 height: 100px; 13 line-height: 100px; 14 text-align: center; 15 background: radial-gradient(red, green, blue); 16 } 17 </style> 18 </head> 19 20 <body> 21 22 <div id="box1"> 23 径向渐变 24 </div> 25 26 </body> 27 28 </html>