开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情
CSS函数计算
css是一门声明式语言，主要为标记语言html服务，随着前端技术的不断更新，css也变得越来越强大，过去只有声明式的css，现在也拥有了具备运算能力的函数。
css能做的事情也越来越多，js有变量与函数，css也有，下面我们列举css函数
css函数:
CSS函数指复杂类型或调用特殊处理的组件值类型。为单调的属性声明增加了更强大的点缀，让简单的CSS变得更有艺术感。其语法也很简单，形式为function(params)，与JS的函数调用一样。在CSS代码中，只要带有()的属性值都是函数。
有了函数后，可将一系列相关计算交给浏览器处理，减少大量人工计算甚至无需人工计算，大大提高代码的编写效率。
css分类:
分类之前了解一下，css函数可能我们平时用的不多，最常用的可能就是url(),rgb(),rgba()等一些简单的函数，但是从w3c标准中查阅可知目前总共存在86个可用函数（不包括那些实验性的函数）
颜色函数
- rgb() ：RGB色彩模式
- rgba() ：RGBA色彩模式
- hsl() ：HSL色彩模式
- hsla() ：HSLA色彩模式
- color() ：色彩模式，基于当前颜色衍生出其他颜色
属性函数
- attr() ：属性
- var() ：变量
数学函数
- clamp() ：区间范围值
- counter() ：计数器
- counters() ：嵌套计数器
- calc() ：计算
- max() ：最大值
- min() ：最小值
背景函数
- url() ：图像路径
- element() ：图像映射，渲染指定元素为图像
- image-set() ：图像集合，根据屏幕分辨率匹配图像
- linear-gradient() ：线性渐变
- radial-gradient() ：径向渐变
- conic-gradient() ：锥形渐变
- repeating-linear-gradient() ：重复线性渐变
- repeating-radial-gradient() ：重复径向渐变
- repeating-conic-gradient() ：重复锥形渐变
滤镜函数
- blur() ：模糊
- brightness() ：亮度
- contrast() ：对比度
- drop-shadow() ：阴影
- grayscale() ：灰度
- hue-rotate() ：色相旋转
- invert() ：反相
- opacity() ：透明度
- saturate() ：饱和度
- sepia() ：褐色
图形函数
- circle() ：圆形
- ellipse() ：椭圆形
- inset() ：矩形
- path() ：路径
- polygon() ：多边行
变换函数
- matrix() ：矩阵
- matrix3d() ：3D矩阵
- perspective() ：视距
- rotate() ：旋转
- rotate3d() ：3D旋转
- rotateX() ：X轴旋转
- rotateY() ：Y轴旋转
- rotateZ() ：Z轴旋转
- scale() ：缩放
- scale3d() ：3D缩放
- scaleX() ：X轴缩放
- scaleY() ：Y轴缩放
- scaleZ() ：Z轴缩放
- skew() ：扭曲
- skewX() ：X轴扭曲
- skewY() ：Y轴扭曲
- translate() ：位移
- translate3d() ：3D位移
- translateX() ：X轴位移
- translateY() ：Y轴位移
- translateZ() ：Z轴位移
缓动函数
- cubic-bezier() ：贝塞尔曲线
- steps() ：逐帧
这些分类中，我们也发现有很多都用不上或不实用，所以也列举几个非常有用的函数
颜色函数
颜色函数是最常见的函数之一，可用在background-color,color,border-color,caret-color等属性中。
RGB色彩模式
声明一个颜色值为白色，普通声明方式color: white,color: #fff.使用颜色函数，可声明为color:rgb(255,255,255)或rgba(255,255,255,1)
rgb()的R表示红色，G表示绿色，B表示蓝色，而rgba()多出来的A表示透明度。A与opacity声明的透明度不同，rgba()声明的透明度不会应用到子节点中，而opacity声明的透明度会应用到子节点中。
属性函数
attr(val)用于返回节点属性，经常会和伪元素content一起搭配使用
<h1 class="hello" data-name="world"></h1>
h1 {
&:before {
content: attr(class)
}
&:after {
content: attr(data-name)
}
}
var（）函数用于引入自定义属性，是css变量的组成之一link.juejin.cn/?target=htt…
数学函数
calc()用于动态计算单位，数值，长度，角度，时间，百分比等都能作为参数，可不需要人工计算
- 数值：
整数、浮点数 - 长度：
px、em、rem、vw、vh等 - 角度：
deg、turn - 时间：
s、ms - 百分比：
%
calc()函数虽然很好用，不过也有一些规则
- 四则运算：只能使用
+、-、*、/作为运算符号 - 运算顺序：遵循加减乘除运算顺序，可用
()提升运算等级 - 符号连接：每个运算符号必须使用
空格间隔 - 混合计算：可混合不同计量单位动态计算
还有一些其他函数也可以去研究研究，这里就列举以上几个常用的。
