一、颜色 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”。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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);
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>