一个对CSS3的各种颜色属性使用教程
RGBA颜色在原有的CSS颜色可以用来表示除了16把RGB颜色值，与预定义的颜色名称可以使用。和RGBA基于RGB不透明度属性。
CSS代码将内容复制到剪贴板。
RGBA（红，绿，蓝，透明度）
红色、绿色和蓝色的颜色值以10进位或百分比表示（%），允许值在0到255之间，而不透明度的允许值是十进制值的0到1。
快速看一下实际例子：
xml代码将内容复制到剪贴板。
RGBA（0, 0, 0，1）
RGBA（100%，100%，0%，0.75）
RGBA（144, 180, 60，1）
RGBA（204, 102, 102）
RGBA（300 - 102, 0, 1）
然后更改CSS：
CSS代码将内容复制到剪贴板。
{ div
宽度：220px；
身高：50px；
浮点数：左；
右边距：10px；
行高：50px；
文本对齐：中心；
边境：1px solid # 000；
}
基本用法：
CSS代码将内容复制到剪贴板。
{。rgba1
/ *相当于# ffffff或RGBA（100%，100%，100%，1）。
颜色：RGBA（255, 255, 255，1）；
/ *相当于000000或# RGBA（0%，0%，0%，1）。
背景颜色：RGBA（0, 0, 0，1）；
}
{。rgba3
背景颜色：RGBA（144, 180, 60，1）；
}
除了实际的颜色值外，它还可以表示为百分比（%）。
CSS代码将内容复制到剪贴板。
{。rgba2
背景颜色：RGBA（100%，100%，0%，0.75）；
}
如果不给出不透明值，则预设值为0；这意味着它是透明的。
CSS代码将内容复制到剪贴板。
{。rgba4
请不要使用默认的0指定不透明值。
背景颜色：RGBA（204, 102, 102）；
}
如果颜色值超过限制，则使用最近的值：
CSS代码将内容复制到剪贴板。
{。rgba5
超出范围，因此成为最接近RGBA（255, 0, 0，1）。
背景颜色：RGBA（300 - 102, 0, 1）；
}
只要色彩的价值部分可以设置rgab（）。但是当你使用一个程序来访问它，你可能已经注意到之间的浏览器的差异。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
$（函数（）{（））
var=；
$（'div：不（#日志））。每个（函数（）{）
var $ = $（这个）；
STR（' '）+ $ this.attr + =+：+ $ this.css +（'background-color）；
}）；
$（#日志'）Html（STR）；
}）；
HSL和HSLA颜色
两个新的颜色相关的属性，如HSL和HSLA加入CSS3。其中H为色调（色相）、饱和（L明度、饱和度）（亮度），HSLA，和RGBA一样，增加了更多的不透明度属性。
CSS代码将内容复制到剪贴板。
HSL（色调、饱和度、亮度）；
（色相，饱和度，明度低合金高强度、不透明度）；
色相是一个整数的角值，基本上是从0到360，因为它是一个简单的计算来处理输入值：
CSS代码将内容复制到剪贴板。
（（（x国防部360）+ 360）国防部360）
因此，即使设定为10，计算后也会变成350，0或360是红色，60为黄色，120为绿色，240为蓝色。
饱和度表示，作为一个百分比（%）；100%是最大饱和，而0%灰。明度的表达方式也百分比（%）；50%为正常亮度，百分比越高，越接近它是白色（100%），和较低的百分比，更要黑（0%），不透明度透明度允许值0至1的十进制值。
看一个简单的例子：
xml代码将内容复制到剪贴板。
HSL（0, 50，50%）
HSL（240, 80，50%）
HSL（30, 100，50%）
低合金高强度（0, 100，0%，0.8）
低合金高强度（210, 100，50%，0.8）
看看CSS的用法：
CSS代码将内容复制到剪贴板。
{ div
宽度：220px；
身高：50px；
浮点数：左；
右边距：10px；
行高：50px；
文本对齐：中心；
边境：1px solid # 000；
}
{。HSL1
颜色：HSL（0, 100，100%）；
背景颜色：HSL（0, 100，50%）；
}
{。hsl2
颜色：HSL（0, 100，100%）；
背景颜色：HSL（240, 50，50%）；
}
{。hsl3
背景颜色：HSL（30, 100，50%）；
}
{。hsla1
颜色：HSL（0, 100，100%）；
背景颜色：低合金高强度（0, 100，0%，0.8）；
}
{。hsla2
背景颜色：低合金高强度（210, 100，50%，0.8）；
}
基本用法是同样为RGB（）和亮度（）。但有趣的是，当我试图使用jQuery来去除颜色值，HSL设置的初始值（）或高速数据线（）将被转换为RGB，RGBA（）（）。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。
$（函数（）{（））
var=；
$（'div：不（#日志））。每个（函数（）{）
var $ = $（这个）；
STR（' '）+ $ this.attr + =+：+ $ this.css +（'background-color）；
}）；
$（#日志'）Html（STR）；
}）；