首页 > Web开发 > 详细

Css3-颜色 color

时间:2019-09-23 11:24:48      阅读:68      评论:0      收藏:0      [点我收藏+]

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

 

Css3-颜色 color

原文:https://www.cnblogs.com/zhuyujie/p/11570820.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!