CSS中的函数一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。众所周知，c

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

众所周知，css是一个声明式的语言，主要为标记语言服务。由于css不能像其他语言一样具有逻辑能力以及函数功能等特性，遭到了众多程序员的鄙视。

但随着css的不断变革，慢慢的也变得越来越强大。css目前也具有函数和运算的相关功能。

什么是函数标记

函数标记是css值和单位模块中的一部分。

W3C中是这样描述函数标记的：

函数标记是一种可以表示更复杂类型或调用特殊处理的组件值类型。语法从函数名开始，紧接着是左括号，然后是参数到符号，然后是右括号。简单来说，在css中只要是带有()的属性值，都可以纳入到css中函数标记，也就是css函数。

常用的css函数

1、calc函数

允许计算css的属性值，比如动态的计算长度值。

main{
   width: calc(100vh - 3.5rem - 8rem);
}

2、attr函数

返回选择元素的属性值

// 将在每个链接名称后面插入属性名为href的内容
// 链接名称（https://www.baidu.com）
<p><a href="https://www.baidu.com">链接名称</a></p>
<style>
    a:after { content: " (" attr(href) ")"; }
</style>

3、max函数

可以从一个逗号分隔的表达式列表中选择最大的值作为属性值。

// 使用 max() 函数将 元素的宽度设置为最大的值，取 50% 或 300px 两者间的最大值
#div1 { 
    background-color: yellow; 
    height: 100px; 
    width: max(50%, 300px); 
}

4、min函数

可以从一个逗号分隔的表达式列表中选择最小的值作为属性值。

// 使用 max() 函数将 元素的宽度设置为最小的值，取 50% 或 300px 两者间的最小值
#div1 { 
    background-color: yellow; 
    height: 100px; 
    width: min(50%, 300px); 
}

5、rgb和rgba函数

rgb()可以使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。其中R、G、B的取值为0-255之间的整数。

rgba()可以使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。其中R、G、B的取值为0-255之间的整数，A的取值为0-1之间，代表透明度。

#p1 {
    color:rgb(255,0,0);
    background-color:rgba(255,0,0,0.3);
} /* 红 */ 
#p2 {
    color:rgb(0,255,0);
    background-color:rgba(0,255,0,0.3);
} /* 绿 */ 
#p3 {
    color:rgb(0,0,255);
    background-color:rgba(0,0,255,0.3);
} /* 蓝 */

6、hsl和hsla函数

hsl()可以使用色相、饱和度、亮度来定义颜色。

hsla()可以使用色相、饱和度、亮度、透明度来定义颜色。

色相（H）： 是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等，(0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色。

饱和度（S）： 是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。

亮度（L）： ，取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。

透明度（A） 取值 0~1 之间，代表透明度。

#p1 {
    color:hsl(120,100%,50%);
    background-color:hsla(120,100%,50%,0.3);
} /* 绿色 */ 
#p2 {
    color:hsl(120,100%,75%);
    background-color:hsla(120,100%,75%,0.3);
} /* 浅绿 */ 
#p3 {
    color:hsl(120,100%,25%);
    background-color:hsla(120,100%,25%,0.3);
} /* 暗绿 */ 
#p4 {
    color:hsl(120,60%,70%);
    background-color:hsla(120,60%,70%,0.3);
} /* 柔和的绿色 */

7、var函数

用于插入自定义的属性值。

// 定义一个名为 "--main-bg-color" 的属性，然后使用 var() 函数调用该属性
:root { 
    --main-bg-color: coral; 
} 
#div1 { 
    background-color: var(--main-bg-color); 
} 
#div2 { 
    background-color: var(--main-bg-color); 
}

8、其他函数

一些其他的css函数：

cubic-bezier()：定义了一个贝塞尔曲线(Cubic Bezier)。
conic-gradient()：定义了一个贝塞尔曲线(Cubic Bezier)。
counter()：定义了一个贝塞尔曲线(Cubic Bezier)。
linear-gradient()：定义了一个贝塞尔曲线(Cubic Bezier)。
radial-gradient()：用径向渐变创建图像。
repeating-linear-gradient()：用重复的线性渐变创建图像。
repeating-radial-gradient()：类似 radial-gradient()，用重复的径向渐变创建图像。
repeating-conic-gradient()：重复的圆锥渐变。