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两至多个色值) ) 

      参数:第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:

     Css3-颜色 color_第1张图片 

  注:第一个参数省略时,默认为“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);

  Css3-颜色 color_第2张图片 

 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>
径向渐变

 

你可能感兴趣的:(Css3-颜色 color)