一、颜色 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”。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Gradient </title>

     <style>

         #box {

             width: 300px;

             height: 100px;

             text-align: center;

             line-height: 100px;

             background-image: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);

         }

     </style>

 </head>

 <body>

     <div id="box">

         从右到左的线性渐变背景

     </div>

 </body>

 </html>

线性渐变

　　2.径向渐变

　　语法：  　　　　　　　　　　　

               径向渐变 radial-gradient(shape size at position, start-color, ..., last-color);

　　

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Gradient </title>

     <style>

         #box1 {

             width: 100px;

             height: 100px;

             line-height: 100px;

             text-align: center;

             background: radial-gradient(red, green, blue);

         }

     </style>

 </head>

 <body>

     <div id="box1">

         径向渐变

     </div>

 </body>

 </html>

径向渐变

Css3-颜色 color的更多相关文章

  1. CSS3颜色特征温故

    网页是色彩的表现原理:显示器是由一个个像素构成,利用电子束来表现色彩.像素把光的三原色:红色(R).绿色(G).蓝色(B)组合成的色彩按照科学原理表现出来.一个像素包含8位元色彩的信息量,又从0 ~ ...

  2. css3 颜色记

    css3 颜色 opacity 使元素呈现出半透明效果. opacity:alphavalue || inherit alphavalue:默认值为1,可以取0~1任意浮点数.取值为1时,元素完全不透 ...

  3. CSS3 & gradient & color & background

    CSS3 & gradient & color & background css background https://developer.mozilla.org/en-US/ ...

  4. CSS3颜色渐变模式

       1.线性渐变:linear-gradient 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <si ...

  5. 熟悉css/css3颜色属性

    颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...

  6. css3 -- 颜色与不透明度

    1.opacity: opacity的值会被它的所有子元素继承,也就是说不可能让一个元素比他的父元素更加不透明,但你可以让他变得更透明点 Firefox  Webkit  Opera支持,注意IE 2 ...

  7. Android 颜色Color（转）

    摘自:http://blog.sina.com.cn/s/blog_6f3ff2c90100t2oa.html Android中使用4个数字来表示颜色,分别是alpha.红(red).绿(green) ...

  8. Android 颜色Color

    Android中使用4个数字来表示颜色,分别是alpha.红(red).绿(green).蓝(blue)四个颜色值(ARGB).每个数字取值0-255,因此一个颜色可以用一个整数来表示.为了运行效率, ...

  9. 颜色(color)转换为三刺激值(r/g/b)（干股）

    //颜色转换  ##665522 - 三色值 + (UIColor *)setFontColorWithString:(NSString *)color {     NSString *cString ...

  10. android颜色color.xml设置

     XML Code  12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...

随机推荐

  1. [NOI2015]程序自动分析（并查集，离散化）

    [NOI2015]程序自动分析 Description 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3,-代表程序中出现的 ...

  2. python3.7爬取墨菲定律保存在本地txt

    #!/usr/local/bin/python3.7 # -*- coding: utf-8 -*- # @Time: 2019/07/15 # @Function 获取在线文本内容 import r ...

  3. kernel32.dll提供的接口分析

    HANDLE hToken = NULL; DWORD cursessionid; HMODULE hInstKernel32 = NULL; hInstKernel32 = LoadLibrary( ...

  4. 学习旧岛小程序 （5） observer 函数中修改属性的值

    不要在一个属性的 observer  函数中修改属性的值 不然会造成内存泄露 错误代码: properties: { /* 期刊号 */ index: { type: String, observer ...

  5. 查看ubuntu系统信息

    root@k8s001:~/go/src/k8s.io/kubernetes# cat /etc/*release DISTRIB_ID=Ubuntu DISTRIB_RELEASE=16.04 DI ...

  6. Mac新手入门：mac操作技巧

    面对全新的mac电脑,你是不是一脸的迷茫,一些原来windows上的基本操作在mac上都不知道从何入手了,下面小编就为大家整理了一些基本的操作.相信一定会方便你的学习和工作的. 如何压缩与解压缩 在M ...

  7. css3新增的属性 - 分享

    CSS3新增属性   一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...

  8. 在Mac电脑上使用NTFS移动硬盘遇到问题

    1.sudo nano/etc/fstab 回车 输电脑密码 2.进入文本插入页面  编入: LABEL=硬盘名字 NONE ntfs rw,auto,nobrowse 3.ctrl + X 退出 选 ...

  9. 现在的编辑器不能复制粘贴word中的文本

    我司需要做一个需求,就是使用富文本编辑器时,不要以上传附件的形式上传图片,而是以复制粘贴的形式上传图片. 在网上找了一下,有一个插件支持这个功能. WordPaster 安装方式如下: 直接使用Wor ...

  10. windows 系统再重启后，USB口失效(鼠标、U盘都无法识别)的过程及解决方法

    今天都差点忘记写随笔.今天在工作中,将电脑重启了一次,悲催了.重启完成后,鼠标无法使用了.最初认为 鼠标的问题,就一直"砸",但后来换了鼠标,仍然不能使用,开始认为没这边简单,拿出 ...