Css3-颜色 color

一、颜色 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>
径向渐变

 

posted @ 2019-09-23 10:14  思猿客  阅读(423)  评论(0)  编辑  收藏  举报