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

亦凉 2022-06-16 06:37 420阅读 0赞

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

[《我的博客地图》][Link 1]

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

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

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、综合实例

5、扩展

CSS函数：

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

calc();计算CSS属性值

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

6、当前文字颜色属性

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

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440