本文已收录于Githubgithub.com/Geekhyt，感谢Star。提起色彩，总会想起苏轼的大好年华。你必须记住。是橙黄橙绿的时候。白居易的日出是红色的，江水比火还亮。春天，河水碧绿如蓝。春天了。也许世界是无色的。古人用诗歌赋予世界色彩，而现在让我们认识颜色的是物理光学。那么本文就带大家一起来揭秘CSS中的颜色。先喜欢再看，养成习惯！CSS中的colorCSS1只支持16个基本颜色关键词CSS2在CSS1的基础上增加了orangeorangeCSS3增加了147个关键词CSS4只增加了一个关键词rebeccapurple链接：CSS3新增147个颜色关键词我认识你CSS4新增的这个关键词rebeccapurple是什么鬼？你觉得我记的英语单词不够多吗？想出这么难记的东西？但实际上CSS作者EricMeyer的女儿Rebecca在六岁时死于脑癌。这是她最喜欢的颜色。RebeccaPurpleLink：为了纪念EricMeyer的女儿，颜色值#663399在CSS4中被定义为“rebeccapurple”。冰冷严谨的代码，却充满了这样的温暖，你值得被铭记。RGB原色理论告诉我们，红、绿、蓝光可以形成所有的颜色。为什么是这三种颜色？因为人的视神经对这三种颜色比较敏感。现代计算机使用0-255的数字来表示每种颜色。在RGB颜色表示方法中，三种颜色中最大值为白色，三种颜色的值为0，表示黑色。也更符合人类的认知去理解。红、绿、蓝三种颜色结合起来就是白光，没有光就是黑色。另外需要注意两点：1、rgb值格式只能是整数，不能是小数。2.也可以用百分比表示，百分比范围0%-100%RGB表示法#div{background-color:rgb(255,0,0);}/*red*/#div{background-color:rgb(0,255,0);}/*green*/#div{background-color:rgb(0,0,255);}/*blue*/十六进制表示法HEX十六进制颜色其实是rgb颜色的近亲，都属于rgb颜色，但底色不同。#div{background-color:#FF0000;}/*red*/#div{background-color:#00FF00;}/*green*/#div{background-color:#0000FF;}/*blue*/RGBARGBA是在RGB的扩展中，增加了一个Alpha颜色通道，指定透明度（取值范围为0到1），0表示完全透明。RGBA代码div{background:rgba(255,0,0,0.5);}RGBA和opacity有什么区别？opacity是一个属性，rgba()是一个函数，经过计算就是一个属性值。rgba一般修改背景色或文字颜色，内容不继承透明度。opacity作用于元素和元素的内容，内容会继承透明度。HSL人类对颜色的感知远大于红、绿、蓝，因此设计了HSL颜色模型。HSL分别代表色相、纯度和明度，还有色相、饱和度和明度。h代表色相，取值为0-360。大致按照红、橙、黄、绿、蓝、蓝、紫的变化，0（或360）为红，120为绿，240为蓝。s表示饱和度，以0-100%表示。值越大，饱和度越高，颜色越亮。0%为灰色，100%为全彩l表示明度，用0-100%表示。值越高颜色越亮，100%是白色，50%是正常亮度，0%是黑色在HSLAlpha的基础上设置透明度。CMYK回忆说，美术老师（我区美协主席）曾经教过，颜料的三原色是“红黄蓝”。颜料能显色的原理是吸收所有其他颜色的光，只返回一种颜色。这个世界就是这么神奇，你看到的不一定是你看到的。颜料的三原色是红、绿、蓝的互补色，又可称为“品红、黄、青”。这种颜色表示称为CMYK。熟悉UI设计的同学一定知道，在印刷行业中，都是用颜料的三基色来配置油墨。但是，除了品红色、黄色和青色之外，黑色颜料被单独指定，因为它们通常使用且价格低廉。transparenttransparent用于指定一个完全透明的颜色，我们可以使用这个属性来绘制一个三角形。.triangle{宽度：0;高度：0；左边框：50px实心透明；border-right:50pxsolidtransparent;border-bottom:50pxsolid#ff0000;
