1.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之间,不可为负值。

2.CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。

  第一个参数省略时,默认为“180deg”,等同于“to bottom”。

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

3.HSL 颜色

  HSL 颜色值得到以下浏览器的支持:IE9+、Firefox、Chrome、Safari 以及 Opera 10+。

  HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标表示法。

  HSL 颜色值是这样规定的:hsl(hue, saturation, lightness)。

  Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同样是百分比值;0% 是黑色,100% 是白色。

例:
p{
  background-color:hsl(120,65%,75%);
}

4.HSLA 颜色

  HSLA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

  HSLA 颜色值是 HSL 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。

  HSLA 颜色值是这样规定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

  例:

  p{
    background-color:hsla(120,65%,75%,0.3);
  }

CSS3--- 颜色的更多相关文章

  1. CSS3颜色特征温故

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

  2. css3 颜色记

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

  3. 熟悉css/css3颜色属性

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

  4. CSS3 颜色属性

    关键字颜色 red 十六进制颜色 #FF0000 RGB颜色   rgb(255,0,0) 新增的颜色表示方法 RGBa: RGB代表光的三原色,Red.Green和Blue CSS3中可以增加一个值 ...

  5. CSS3颜色渐变模式

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

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

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

  7. CSS3 颜色模式

    HSL .test{background-color:hsl(<length>, <percentage>, <percentage>);} 1.length 表示 ...

  8. CSS3颜色渐变模式总结

    1.线性渐变:linear-gradient 语法:= linear-gradient([ [ | to [, ]+) = [left | right] || [top | bottom] = [ | ...

  9. CSS3 颜色渐变、阴影、渐变的阴影

    css阴影: 外阴影:box-shadow:X Y Npx #color; 内阴影:box-shadow:inset X Y Npx #color; 文字阴影:text-shadow:X Y Npx ...

  10. css3颜色

    镂空字的2种做法

随机推荐

  1. pycharm命令行快捷启动

    打开 本用户目录下的.bashrc文件 vim .bashrc 在末尾添加一行 alias pycharm="the-path-to-pycharm.sh" 最后保存退出 然后更新 ...

  2. gvim 常用键

    按i 切换到插入模式,ESC退出 命令模式下 dd 删除一行 dw 删除一个字 x 删除一个字符 :set num  设置行号 :reg 查看寄存器 p 粘贴 y 复制 "*p  不同环境下 ...

  3. Jquery | 基础 | 导航条在项目中的应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. SpringBoot | 教程

    Spring Boot 2.0(一):[重磅]Spring Boot 2.0权威发布 Spring Boot 2.0(二):Spring Boot 2.0尝鲜-动态 Banner Spring Boo ...

  5. 跟我一起玩Win32开发(24):计时器

    有好些时间没写博客了,今天要来耍一下计时器,就是我们常说的Timer,它虽然不是什么复杂的东西,也称不 上牛X,不过,用处还是不少的,对于那些需要每隔一定时间执行一次的任务,那是相当有用. 先来认识一 ...

  6. nginx媒体压缩

    1 gzip模块 参考:http://nginx.org/en/docs/http/ngx_http_gzip_module.html 浏览器的请求头里会表明Accept-Encoding 方式.服务 ...

  7. Jmeter安装说明

    本文主要介绍Jmeter工具的安装 一.安装JDK 1.下载jdk,到官网下载jdk,下载jkd1.8即可,地址:http://www.oracle.com/technetwork/java/java ...

  8. magento package

    Magento Local module file is relative to app/code/local/ Magento Community module file is relative t ...

  9. Backbone学习记录(5)

    数据与服务器 var User=Backbone.Model.extend({ defaults:{ name:'susan', age:18 }, url:'/user'//数据提交的路径 }); ...

  10. Camera和 tris,verts的优化

    Unity的Camera组件有很多可调节的参数,当需要做优化的时候,stats面板中的tris和verts这两个重点项都与Camera组件的参数有很大关系,有些参数的意义Unity手册说得不够详细,经 ...