CSS-颜色属性+颜色函数+自定义变量

最近更新时间：2017年5月8日16:08:13

《我的博客地图》

    离开校园踏入职场，不是到达人生巅峰，而是人生才刚刚开始。校园里学的知识远不足工作需求，而且校园里的学习深度也比较浅显。因此，对于刚毕业前三年的工程师来说，马不停蹄不分昼夜的学习和汲取工作中需要用到的知识，是一个硬功夫，需要练就。兴趣是第一老师，有了兴趣工作才有激情和动力，因此，选择自己喜欢的一份工作比任何选择条件都要优先，永远将 喜欢 放在首位。

1、CSS颜色属性的设置和表示方法

	<style type="text/css">
		#div{
			color: red;/*关键字表示法*/
			color: #f00;/*短-16进制表示法*/
			color: #ff0000;/*长-16进制表示法*/
			color: rgb(255, 0, 0);/*rgb基本表示法*/
			color: rgb(100%, 0, 0);/*rgb百分比表示法*/
			color: hsl(240, 0%, 50%);/*色彩三属性表示法表示法，下文具体解释hsl含义*/
			color: color(#29B4F0 a(50%) contrast(%10) h(10));/*颜色函数表示法，请看下文具体解释*/
		}
	</style>

2、CSS自定义变量

    声明语法：--*，如--color-basis: red;

    调用语法：var(--color-basis)，如color: var(--color-basis);

    位置：可以放在根选择器中，也可以放在常规选择器中

引申：CSS3根选择器，:root选择器匹配文档根元素，在HTML中，根元素始终是html元素，语法如下：

:root{

--color-basis: red;//定义一个CSS变量

background: #f00;//设置html元素背景色

}

3、CSS颜色函数

    CSS Color Module Level 4的颜色配置函数有：color()、gray()、hsl()、hwb()等，这些函数浏览器暂时不支持，实际开发需要引入第三方插件（postcss/cssnext）来做预处理。

    color-mod()函数详解：

    color-mod() = color(#29B4F0 a() s() h() l() tint() shade() w() b() contrast());

    调用语法：

    #div{background-color:color(#29B4F0 a() s() h() l() tint() shade() w() b() contrast() blend());}

第一个参数基准色值，必须设定；

第二个参数及后面的参数为可选参数，这些参数的详细含义如下：

    a-alpha，透明度，值为百分比；

    b-blackness，黑度，值为百分比；

    blend，混合度，值为百分比;

    contrast，对比度，值为百分比；    

    h-hue，色相-色彩的第一属性，色彩的相貌区别；0-360deg，0和360是红色，接近120的是绿色，240是蓝色；

    l-lightness，明度，亮度-色彩的第二属性，表明色彩的明暗性质； 0%是最暗，50%均值，100%最亮。

    s-saturation，纯度，饱和度-色彩的第三属性，表明色彩的鲜灰程度；0%是灰度，100%饱和度最高 ;

    shade，暗度，值为百分比；

    tint，色调，值为百分比；

    w-whiteness，白度，值为百分比；

4、综合实例

	<style type="text/css">
		:root{
			--color-basis: red;
			--mytheme-p-color: var(--color-basis);
		}
		p{
			color:color(var(--mytheme-p-color) a(50%) hue(+30deg));//p元素dom数组集合中，每个元素的hue递增30deg，等同于hue += 30
		}
	</style>

5、扩展

    CSS函数：

attr();返回选择元素的属性值

calc();计算CSS属性值

linear-gradient();创建一个线性渐变的图像
radial-gradient();用径向渐变创建图像
repeating-linear-gradient();用重复的线性渐变创建图像
repeating-radial-gradient();类似 radial-gradient()，用重复的径向渐变创建图像。

6、当前文字颜色属性

如：border: 1px solid currentColor;//currentColor是CSS3的一个变量