首先，使用图片直观地感觉到CSS颜色所覆盖的内容。
下面的行可能会按照这个顺序进行，内容非常的基本，并且可以有选择地跳到对应的内容来读取。
色键
嗯，颜色键是很好理解的，它代表一个特定的颜色值，它不区分格和格。例如，颜色：红色的红色是一个颜色关键字。
在CSS3 CSS 2标准，包括17种基本颜色，是：
和CSS3颜色键已大大扩展到147。以下是列表的一部分：
值得注意的是，未知关键字会使CSS属性无效。
这里的测试试验是表明当输入颜色的关键词是错误的，CSS属性无效而不使用电流currentcolor substitution.currentcolor下面会解释。
可以在颜色中设置哪些属性
所有可以使用颜色值的地方都可以用颜色键代替，那么CSS中的颜色值可以在哪里使用呢
颜色：文本的红色。
背景色背景色：元素的红色（包括各种渐变）
元素边框颜色的边框：红色
元素或文字阴影框阴影框阴影：0 00一个红色的|文字阴影：5px 5px 5px红
过滤器：阴影（16px 16px 20px红色）使用一些过滤器
水平线的颜色
一些无法直接设置，但是可以继承当前元素currentcolor性能：
alt文本。也就是说，当图像不显示时，出现的文本而不是图像将继承颜色的值。
UL列表项目的小点
一些比较常见的例子是没有示例，比如ALT文本和UL列表项的小点。
经过测试，颜色的值可以通过设置边框的颜色值来表示。
小分的ALT文本和UL列表项继承当前元素currentcolor性能。
对于表格控件，暂时找不到一个直接改变颜色的好方法，如果有人知道你的批评是慷慨的。
透明
透明的字面含义是透明度，它用来表示完全透明的颜色，也就是说，颜色看起来像背景色。
它也可以被理解为一个简单的RGBA（0,0,0,0）。
值得注意的是：
在CSS3，透明的关键词是不是一个真正的颜色，它只能用在背景颜色和边框颜色是透明色。在浏览器支持CSS3，它被重新定义为一个真正的颜色。透明可以应用于任何需要颜色值的地方，比如颜色属性。
那么这个透明值有什么用呢简单列举一些例子：
透明用于边框，绘制三角形。
这是透明的最常用的一种用法，用于绘制三角形。
结合图1和图2，我们可以看到，0宽和高宽边框可以设置其部当边框颜色任何三方是透明的，然后可以得到任意方向的三角形。
如上所述，因为透明可用于低浏览器（ie78）在边框和背景，所以这种方法有很好的相容性，可以应用在很多场景。
透明用于边界以增加命中热区。
按钮是我们网页设计中非常重要的一部分，按钮的设计也与用户体验密切相关，用户轻松点击按钮无疑会增加用户体验，尤其是在移动终端。按钮通常非常小，但有时由于设计草图的限制，我们不能直接改变按钮元素的宽度。所以，此时，在不改变按钮原来大小的情况下，增加其点击热区的方法是什么
在这里，借助透明边框，它可以方便地为我们实现。（我写在前面的文章中，使用伪元素也可以实现），使用一个透明的边框：20px固体透明的，我们可以这样写。
尝试关闭游标关闭按钮。它会发现鼠标交互响应悬停在颜色区域到达之前已经触发。利用这一点，我们可以在不改变按钮本身的形状扩展按钮的点击区域。像这uff1a
好了，在这里我们用边框来展开鼠标点击区域，但现实是有时我们必须使用边框按钮，而边框只能设置一个权重（不象框阴影和渐变设置多个边框），这时候如果你需要使用这个方法，可以模拟一个阴影边框的阴影框使用，如下所示：
透明用于背景绘制背景图。
透明是在背景中使用的，通常可以生成各种背景图像：
通过线性梯度线性渐变，实现了由透明色到纯色的转变，并将四×1／4尺寸（背景尺寸：50%—50%）图形组合成一个角形图形。
透明和渐变的结合也可以创造出各种精彩的图案，可以在下面压印。
透明用于文本颜色。
用方块阴影，在文本中使用透明，可以创建一种文本光效果，鼠标悬停文本下尝试：
透明其实有很大的效果，等等，欢迎大家继续讨论。
currentcolor
很多人不知道，在东方有currentcolor。像是透明的，它也是一个关键词，其中，顾名思义，表示当前颜色。它来自一个自我从其父继承财产属性或。
很容易理解由当前CSS标签继承或设置的文本颜色，即颜色的值。
那怎么用呢根据我们编写CSS原理，干（人，不重复自己），使用这个关键字可以减少更换CSS极大的工作量。看一个例子：
在上面的例子中，我只写颜色的颜色，在边境和box-shadow.we使用currentcolor属性可以看到这两个属性的颜色值设置中设置颜色值，当我们需要使用相同的颜色，currentcolor方便使用后的变化。
然而，currentcolor是CSS3的新成员，其中老版浏览器下是无法识别的。它是不可能使用它在浏览器或不老的版本，或者有一些特殊的情况，请看下面：
你可以看到，在上面我只写了颜色的颜色，边界值为1px solid，盒的影子也没带颜色的值，但它仍然显示currentcolor的价值。这是因为边框颜色、阴影颜色默认是当前文本框的颜色，在边境的兼容性很好，可以支持IE6。
当然，边框和框阴影是异常的，并不是所有需要填充颜色值的属性都不能填充文本的默认值。
要获取或继承的元素的颜色值是什么这个盒子的影子，ALT文本过滤器：阴影、ALT及元素的轮廓要素边界元素，当图像不显示，这似乎不是图像将继承该颜色值的文本，列表项的黑色小斑点，一些浏览器边框颜色（如铬）水平线（）。（没有边框，颜色会不会受影响）。
currentcolor兼容性
RGB（）和RGBA（）
如果颜色代表模型，让我们简单地理解它。
RGB（）代表红-绿-蓝（红、绿、蓝（RGB））的彩色图案，和RGBA（）有一个，说明它的透明度，这是0-1。
RGB的颜色模型通常用立方体表示。
我们知道，当我们使用它，我们不使用缩写，运用十六个二进制符号# rrggbb，
在# rrggbb，RR代表红色的阴影，GG是绿色，和BB是蓝色的。价值是00法郎，值越大，颜色越深。
如果使用RGB（RR，GG，BB），RR值为0～255或百分比，255等于100%，f或FF为十六符号。
知道RGB（）的含义，很容易记住常用的颜色值。如上所述，RR代表红色的深度。然后，# FF0000表示为红色，那么容易。同样，# 00ff00可以表示为绿色和# 0000ff是蓝色的。
记住颜色叠加的原理。
我们可以很容易地记住# ff00ff红色和蓝色的叠加是紫色，红色和绿色的# ffff00叠加是黄色的，和# 00ffff蓝绿色的叠加是绿色的。
HSL（）和高强度低合金钢（）
除了RGB表示的颜色也可以代表HSL（）HSL（）被定义为色相饱和度亮度（色调、饱和度、亮度），和高强度低合金钢（）也就越多，说明它的透明度，并且值为0-1。
HSL的优势比RGB更直观：你可以估算出你想要的颜色，然后调整它。它也更容易创建一套相称的颜色。
HSL颜色模型通常是由一个圆柱体代表：
色相（H）是颜色的基本属性，是颜色的通常的名称，如红、黄等饱和度（S）是指颜色的纯度高的颜色，较低的灰色，与0-100%的价值。亮度（V），亮度（L），采取0-100%。
事实上，我们的前端，它是使用HSL颜色显示更方便。
把一个按钮作为一个例子，我们使用HSL颜色表示正常状态的按钮的背景颜色值。我们希望，背景色是暗时悬停使用，而活跃的背景颜色较浅。如果我们用RGB表示，我们需要3个完全不同的颜色，并使用HSL的表达。我们只需要在悬停和活动时使用颜色值l（亮度，亮度）值。
这里的背景：HSL（200, 60，60%）在悬停和积极的，我只是改变了HSL颜色值的第三个值达到预期效果。
从RGB转换到HSL
有一个小技巧，有些人可能不知道，我们只有在发展阶段的RGB值，但希望将HSL值，使用Chrome开发者工具可以做，很方便：只需要查看我们想要的颜色值转换，按键盘上的左移，点击颜色框，你可以转换：
以上是CSS颜色系统学习萧边推荐的一个简短的总结。希望能对你有所帮助。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。
