小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
大家对css中的函数一定不陌生，像clac、 rgba等css函数在平时使用频率还是很高的。今天我们就来盘点一下css那些属性。
以下分类参考文章：css函数竟然有86个！！！css函数大全
属性函数
attr()
attr用来获取被选中元素的属性值，并且在样式文件中使用。它也可以用在伪类元素里，在伪类元素里使用，它得到的是伪元素的原始元素的值。
这个属性作用还是挺好理解的，就是不太好get到可以用在哪里，感觉有点鸡肋。但是事实并非如此。这里举个栗子：给按钮增加悬浮提示框.更多的用法大家可以去百度一下。
<div class="wrap">
<button data-tip="点我提交内容">我是一个按钮</button>
</div>
button:hover::after {
position: absolute;
margin-left: 20px;
content: attr(data-tip);
background-color: yellow;
}
背景图片函数
url()
这个大家肯定熟的透透的了，这里也不过多描述，直接跳过。
image-set()
根据设备像素比设置图片，套用张鑫旭大大的例子就非常好懂了。
background-image: image-set(url(zxx.png) 1x, url(zxx-2x.png) 2x, url(zxx-print.png) 600dpi);
/*
如果屏幕是一倍屏，也就是设备像素比是1的话，就使用zxx.png作为背景图片；如果屏幕是2倍屏及其以上，则使用zxx-2x.png这张图作为背景图；如果设备的分辨率大于600dpi，则使用zxx-print.png作为背景图。
*/
大大文章传送门：我们一起学习CSS image-set()
element()
这个函数真的是很神奇，当时查到这个函数的用法都惊呆了。作用是将网站中的某部分当作图片渲染。什么意思呢，你可以将一部分dom元素作为图片使用。甚至可以当作另一个dom元素的背景图片。
来直观感受下：
<body>
<div id="css-source">
<p>luo yan</p>
</div>
<div id="css-result">
<p>111111111111111111111</p>
</div>
</body>
#css-result {
background: -moz-element(#css-source); /*使用火狐浏览器查看效果*/
/* background-size: 50% 50%; */
}
#css-source {
width: 100px;
height: 100px;
margin-right: 30px;
color: red;
background-color: yellow;
}
颜色函数
纯色
| 函数名 | 意义 |
|---|---|
| rgb | 红-绿-蓝三原色 |
| rgba | 红-绿-蓝-透明度 |
| hsl | 色相-饱和度-亮度 |
| hsla | 色相-饱和度-亮度-透明度 |
| hwb | 色调-白色浓度-黑色浓度 |
| lch | 亮度-色度-色调 |
| device-cmyk | 印刷四分色模式：品红、黄、青、黑 |
前两个大家应该很熟悉，其他的即使大家没有了解过。看表格应该能快速get到的。
更具体的可以去看这篇文章：CSS 函数那些事（六）多姿多彩颜色函数
渐变
| 函数名 | 意义 |
|---|---|
| linear-gradient | 线向渐变 |
| radial-gradient | 径向渐变 |
| conic-gradient | 锥形渐变 |
| repeating-linear-gradient | 重复线向渐变 |
| repeating-radial-gradient | 重复径向渐变 |
| repeating-conic-gradient | 重复锥形渐变 |
div {
width: 100px;
height:100px;
margin-right: 50px;
}
.one {
background: linear-gradient(yellow, red);
}
.two {
background: radial-gradient(yellow, red);
}
.three {
background: conic-gradient(yellow, red);
}
后三个可以看到对应的是前三个的重复，这些函数也可以再指定角度等参数，自己可以了解一下，这里就不再赘述了。
color-mod()
该函数指采用现有的颜色，并应用零个或多个色彩调节器，它将指定如何处理的最终结果，听起来就很牛。可以通过多种调节得到最接近我们心目中的颜色。但是可惜这个函数还处于草稿模式。
更具体一点的内容可参考：原生CSS六个不容小觑的新增功能
本来想一篇文章介绍完css函数的，真的太多了，打算分个2到3期。而且并没有讲的很细，只是大概给大家概况了一下。大家也需要注意:这不一定是全部css函数，毕竟这方面资料比较杂，我也有可能遗漏。
