共计 3207 个字符，预计需要花费 9 分钟才能阅读完成。
Modify By JasonSubmara
CSS 函数
与 Javascript 一样，CSS 中也有一些计算函数，仅对与一些罕用的和集体理解的做一次分享。
CSS 函数较多，从罕用性和理论登程，按使用比重程序排序
Color 色彩相干
rgb()、rgba()
这两个函数肯定是不会生疏的，对于色彩属性值通过红绿蓝三原色来进行调整。
区别在于 rgba() 中 a 示意透明度，取值 0 - 1 之间。相对来说最为罕用
除此之外，相似的 CSS 色彩函数 还有：
hsl()、hsla()
应用色相、饱和度、亮度、(透明度)来定义色彩
hwb()
应用色相、以及黑白混合度（whiteblack）如上方右图所示。
绝对的，可能对于美术或设计师更能了解以色相为主的色彩选取形式，其实对于代码来说，咱们应用 rgb()和 rgba()即可，兼容性也是良好的。
color-mod()
CSS Color Module Level 4 中提出一个新的 CSS
其是基于一个色彩值，在不同的条件下调整参数失去的新色彩，未作深刻理解。能够通过 https://colorme.io/ 这个网站来看下具体色彩值是如何变动的，同时大漠老师的博客中也有相干的文档解释，能够参考下。
应用 color-mod()函数批改色彩
Transform 变换相干
对于不同内核浏览器，可能须要退出公有前缀来进行对应的兼容性解决，而 3d 边换，IE 毒瘤则是肯定不反对的
translate 地位变换：translate()、translateX()、translateY()、translate3d()
rotate 旋转变换：rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()
skew 歪斜变换：skew()、skewX()、skewY()
scale 缩放变换：scale()、scale3d()、scaleX()、scaleY()、scaleZ()
Background 背景相干
linear-gradient() 线性突变
代码实现如下：
radial-gradient() 径向突变
代码实现如下：
conic-gradient() 角向突变
代码实现如下：
element() 将网站中的某局部当作图片渲染
CSS Color Module Level 4 中提出一个新的 CSS，因为只能在 Firefox 浏览器内产生成果，能够参考大漠老师的另一篇文章，外面有更为具体的介绍
CSS element()函数
Math 计算相干
相对来说，计算相干的函数其实兼容性个别，对于集体我的项目或挪动端我的项目能够做尝试
min() 取最小值
对于 dialog 这一类元素，其长度该当适应于不同分辨率下，以往可能须要应用 vw / % 等来渲染，然而会有一个问题，那就是在不同分辨率下可能 60vw / 60% 下，dialog 的宽度在 1920 分辨率下看着还算失常，然而在 1366 等比拟小的分辨率下会呈现宽度不足以包容外部元素，或者做适配时不太优雅展现的时候，能够思考联合这一类计算函数来进行。
.dialog {width: min(700px,80vw) / 解析为宽度取 700px 和 80vw 中较小的那一个数值 / }
max() 取最大值
同 min() 取值逻辑
clamp() 取值范畴
clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX))
其中 MIN 示意最小值，VAL 示意首选值，MAX 示意最大值。意思是，如果 VAL 在 MIN 和 MAX 范畴之间，则应用 VAL 作为函数返回值；如果 VAL 大于 MAX，则应用 MAX 作为返回值；如果 VAL 小于 MIN，则应用 MIN 作为返回值。
.dialog {width: clamp(240px, 50vw, 600px) / 解析为当 50vw > 600px 时，.dialog width 值等于 600px / / 当 240px <= 50vw <= 600px 时，.dialog width 值等于 50vw / / 进一步放大，当 50vw < 240px 时，.dialog width 值等于 240px / }
相干例子成果展现能够参考张鑫旭老师博客中的在线代码，地址如下:
https://www.zhangxinxu.com/study/202004/css-clamp-function-demo.php
calc() 动静计算
calc() 应该是最为常见的 css 计算函数了，可联合 四则运算来取局部的宽低等，可用于圣杯布局中主体内容的宽高计算等须要动静计算的中央
Attr() 属性函数
仅从官网的例子中只能看到些根底的利用，且容易了解，而张鑫旭老师博客中指出：
传统的 attr()语法只能让 HTML 属性作为字符串应用，且只能应用在伪元素中
全新的 attr()语法那可就齐全不得了了，能够让 HTML 属性值转换成任意的 CSS 数据类型。
集体尝试代码间接报错了~????，
还是倡议想要理解的查看下原文章：
https://www.zhangxinxu.com/wordpress/2020/10/css-attr-polyfill/
CSS 变量
var()函数能够代替元素中任何属性中的值的任何局部。var()函数不能作为属性名、选择器或者其余除了属性值之外的值。
CSS 变量申明
--* 用来申明变量，应用 var(--*) 来应用变量
- CSS 变量申明只可用于属性值，不可用以属性名
- CSS 变量不反对多个同时申明
- CSS 变量应用的合法性
- CSS 变量与属性单位联合须要应用 * 乘法
- CSS 变量的申明时可互相调用申明的变量
:root {–main-bg-color: pink; –ml: 20px; –mlv: 20; –primary-size: 20px; –base-font-size: var(–primary-size); / 变量申明时的调用 / } body {background-color: var(–main-bg-color); / 体现后果为：背景色为粉红 / } .ml20 {margin-left: var(–ml); margin-left: calc(var(–mlv) 1px); / 体现后果都是左间距 20px, 此处的变量使用需区别带单位和不带单位的应用差别 */ }
CSS 变量作用域
:root {–color: purple;} div {–color: green;} #alert {–color: red;} * {color: var(–color); } <p> 我的紫色继承于根元素 </p> <div> 我的绿色来自间接设置 </div> <div id=’alert’> ID 选择器权重更高，因而阿拉是红色！<p> 我也是红色，占了继承的光 </p> </div>
上述代码中，显示出了 CSS 变量也是具备作用域的
: root 取全局作用域，div 取所有的 div 元素，#alert 取所有 id 为 alert 的元素应用，依照 css 解析程序，下面案例代码的元素色彩即和文字表述统一
JS 读取 CSS 变量
var cssVarColor = getComputedStyle(box).getPropertyValue(‘–color’); // 输入 cssVarColor // 输入变量值是：#cd0000 console.log(cssVarColor);
CSS 变量在日渐欠缺，浏览器对于其支持性也在缓缓变多，而区别于 Sass/Less 等预处理器来说，原生变量不须要去进行编译等操作，然而绝对的，CSS 变量的语法还有待进步和优化，不过咱们能够提前做尝试和使用~
内容些许通俗，仅是集体对于局部 CSS 相干的常识的演绎总结，不当之处，感激斧正！
如须要更多更具体的解读，可通过参考链接浏览相干文章做近一步理解~
文中局部案例代码在我集体的 Github 上，能够进行一下参考~
参考链接
- css 函数居然有 86 个！！！css 函数大全
- css hwb() Function
- 理解 CSS min()/max()/clamp()数学函数
- 应用 color-mod()函数批改色彩
- Polyfill 吊炸天的 CSS attr()新语法
- CSS 变量教程