css只是一个声明式的语言，主要为标记语言服务。很多程序员鄙视它，有一部分原因是CSS并不像其他程序语言一样，具有一些逻辑能力以及函数功能等特性。

随着CSS的不断变革，其慢慢地也变得越来越强大。时至今日，CSS中也有具有函数和运算相关的能力，之前一直以为css没有几个函数，今天才发现css现在竟然已经有86个函数了，意不意外，惊不惊喜！

在CSS中只要是带有()的属性值，我们都可以把它纳入到CSS中函数标记（或者函数表示法），简单的就称其为CSS函数。仔细回忆一下，如果按其功能或特性我们可以简单的分为：

• 属性函数：attr()；
• 背景图片函数：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()；
• 颜色函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；
• 图形函数：circle()、ellipse()、inset()、polygon()、path()
• 滤镜函数：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；
• 转换函数：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；
• 数学函数：calc()、min()、max()、mixmax()、repeat()；
• 缓动函数：cubic-bezier()、steps()；
• 其他函数：counter()、counters()、toggle()、var()、 symbols()。

CSS常用的函数方法举例

1. attr()

用来选择元素的属性值，用法：attr(html元素的属性名)，正常搭配css content一起使用

html: 
<p><a href="http://a.b.c" name="attr">十</a></p>
<p><a href="http://d.f.e" name="我是谁">九</a></p>

css:
a:after{content:'('attr(href) '/' attr(name) ')'}

结果：
十(http://a.b.c / attr)
九(http://d.f.e / 我是谁)

2. calc()

用于动态计算长度值 calc(数学表达式)

- 运算符前后需要有空格
- 不管什么长度都可以用calc计算
- calc() 支持 '+','-','*','/' 等运算
- calc() 使用标准的数学运算优先级规则

// 语法：
width: calc(70% - 60px) 
height: calc(70% / 2 * 12 + 66px)

3. linear-gradient()

用于 创建一个线性渐变的 图像，需要设置一个起点一个方向，还可以定义角度起始颜色等。

// 语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction: 指定渐变方向的角度 （可以省略）
color-stop1： 指定渐变的起止颜色

示例：

background: linear-gradient(red,yellow,blue,green);

4. radial-gradient()

用法和linear-gradient()差不多，只不过它是用径向渐变创建图像，渐变由中心点定义，必须设置两个终止色（区别）

语法：
background: radial-gradient(shape size at position, start-color, ..., last-color);

shape: 确定圆的类型（选填）
    - ellispe(默认): 指定椭圆形的径向渐变
    - circle： 指定圆形的径向渐变

size: 指定径向渐变的大小（选填）
    - farthest-corner(默认)： 指定径向渐变的半径长度为从圆心到离圆心最远的角 
    - closest-side： 指定径向渐变的半径长度为从圆心到离圆心最近的边
    - closest-corner： 指定径向渐变的半径长度为从圆心到离圆心最近的角
    - farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边

position: 定义渐变的位置（选填）
    - center(默认)：设置中间为径向渐变圆心的纵坐标值
    - top：设置顶部为径向渐变圆心的纵坐标值
    - bottom：设置底部为径向渐变圆心的纵坐标值

start-color, ..., last-color：定义渐变的起止色

5. repeating-linear-gradient()

创建重复的线性渐变图像

语法：
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
angle: 定义渐变角度（0deg-360deg，默认180deg）
side-or-corner: 指定线性渐变起始位置（顺序随意）
    - 关键字一： 水平位置（left,right）
    - 关键字而： 垂直位置（top,bottom）

color-stop1, color-stop2,... 
    - 指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/10959