css-tutorial/chapters/019 函数.md

# CSS函数

*css有一些内置的函数（方法）。本节内容带大家一起了解一些常用的内置函数。*

在前面的章节中，我们已经使用过一些函数了，例如`minmax()`、`fit-content()`、`rgb()`、`hsl()`以及`calc()`等。

与其他语言一样，css同样包含一些内置的函数，你可以在页面的任何地方使用它们来修改优化页面的样式。

每个函数都有它各自的目的及用法。本节将对这些函数做个大概的讲解，希望可以帮助你更好的认识和理解css函数。

## 一.函数是什么？

如果你是个程序员，你肯定知道函数是什么。函数是一段代码的封装，这段代码用于完成某个特定的任务。函数有入口和出口，你可以通过入口传递一些参数给函数，等函数执行完毕，它的执行结果从出口出来。css的函数类似一个加工厂的生产机器，你给它一些原材料（函数参数），它会帮你加工，生产产品（函数返回值）。这里我不做过多介绍。

你可以将函数认为是一个数学公式，例如`a+b`，向公式传入参数`a`和`b`的值`1`和`2`，得到结果`3`。

在其他语言（C#、C++、javascript）中，你可以自定义函数使用。但是在css中，你只可以使用css内置的函数。

## 二.函数选择器

```css
.post :is(h1, h2, h3) {
    line-height: 1.2;
}
```

在[伪类](http://pengfeixc.com/tutorial/css/pseudo-class)中介绍过`:is()`和`:not()`的作用。`:is()`和`:not()`接受的参数为css选择器，它们用于选择和过滤元素。


## 三.自定义属性和`var()`

```css
:root {
	--base-color: #ff00ff;
}

.my-element {
	background: var(--base-color);
}
```
自定义属性也叫做**CSS变量**。自定义属性名称必须以双横线（--）开头，表示它是一个自定义属性（css变量）。

`var()`函数接受一个自定义属性名称作为参数，然后返回该自定义变量的值（css样式）。上面的代码，`var()`函数以`--base-color`为参数，如果`--base-color`已经定义，那么`var()`函数将返回`--base-color`变量的值。

```css
.my-element {
	background: var(--base-color, yellow);
}
```
你还可以给`var()`函数传递第二个参数，表示如果没有找到`--base-color`的定义，函数会以`yellow`作为返回值（输出）。
<iframe height="300" style="width: 100%;" scrolling="no" title="019 Functions_01" src="https://codepen.io/AhCola/embed/YzQPVjx?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/YzQPVjx">
  019 Functions_01</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 四.有返回值的函数

并不是所有函数都有返回值的。`var()`函数恰好是一个有返回值的函数。`attr()`和`url()`函数与`var()`类似，你可以向它们传递一个或者多个参数，然后将它们作为css声明的属性值。
```css
a::after {
    content: attr(href);
}
```
上面的代码，将`<a>`元素的`href`属性值与`::after`伪类元素的内容绑定，当`href`属性变化时，`::after`伪类的内容也会变化。
```css
.my-element {
	background-image: url('/path/to/image.jpg');
}
```
`url()`函数接受一个URL字符串，用于加载图片、字体和内容。如果没有传递一个有效的url或者url指示的资源找不到了，那么`url()`函数不会返回任何值。

## 五.颜色函数

在[颜色](http://pengfeixc.com/tutorial/css/color)章节中，我们介绍过与颜色相关的所有函数。如果你还没有看过[这篇](http://pengfeixc.com/tutorial/css/color)文章，强烈建议你去看一下。

与颜色相关的函数：`rgb()`、`rgba()`、`hsl()`、`hsla()`、`hwb()`、`lab()` 和`lch()`。它们都接受一些参数，然后返回一个颜色。

## 六.数学表达式

CSS提供了一些非常有用的数学计算相关的函数。

### `calc()`

`calc()`接受一个数学表达式作为参数，返回该表达式的结果。
```css
.ele {
    width: calc(100% - 2rem);
}
```
上面的代码，`calc()`的计算结果是`.ele`元素的容器元素的高度减去`2rem`，然后将结果作为`.ele`的宽度。

`calc`函数可以嵌套使用，你还可以将`var()`函数作为表达式参数的一部分。
```css
:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}
```

### `min()`和`max()` 

通过名称，就知道这两个函数是用来计算最大值和最小值的，它们都接受两个参数，返回两个数中的最小值和最大值。
```css
.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}
```

### `clamp()` 

`clamp()`函数接受三个参数：最小值、理想值、最大值。

`clamp(MIN, VAL, MAX)`与`max(MIN, min(VAL, MAX))`等价，`clamp(MIN, VAL, MAX)`的目的是要找到三个数的中间值。
1. 如果`VAL`在`MIN`和`MAX`之间，结果为`VAL`。
2. 如果`VAL`小于`MIN`，结果为`MIN`。
3. 如果`VAL`大于`MAX`，结果为`MAX`。

```css
h1 {
    font-size: clamp(2rem, 1rem + 3vw, 3rem);
}
```

`min`、`max`和`clamp`在其他语言也有类似的实现，基本用法都是一样的。

## 七.形状

`clip-path`、`offset-path`和`shape-outside`属性用于裁剪元素盒子或者为内容提供一个形状区域。它们接受一些css函数作为属性值。

例如一些简单的形状函数，`circle()`、`ellipse()`和`inset`，还有一些更复杂的函数，例如`polygon()`。
```css
.circle {
    clip-path: circle(50%);
}

.polygon {
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
```

## 八.变换

最后，再介绍下css中的变换。下面所有的变换都是用`transform`属性实现的。

### 旋转

你可以使用`rotate()`函数旋转一个元素，它将一个元素绕其中心轴，旋转一个角度。你可以使用`rotateX()`、`rotateY()`、`rotateZ()`函数，让元素绕某个特定轴旋转。旋转函数接受`deg`、`turn`或者`rad`等角度单位值作为参数。
```css
.my-element {
    transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
```

<iframe height="300" style="width: 100%;" scrolling="no" title="019 Functions_02" src="https://codepen.io/AhCola/embed/oNwgebm?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/oNwgebm">
  019 Functions_02</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

还有一个`rotate3d()`函数，接受4个参数，前三个参数是数字，定义X、Y、Z坐标，第四个参数表示角度。
```css
.my-element {
    transform: rotate3d(1, 1, 1, 10deg);
}
```

### 缩放

`scale()`函数用于缩放元素。同样有`scaleX()`、`scaleY()`、`scaleZ()`，用于缩放不同轴方向的尺寸。
```css
.my-element {
    transform: scaleX(1.2) scaleY(1.2);
}
```

`scale3d()`与`rotate3d()`类似，只不过它接受三个参数，分别是X、Y、Z方向的缩放因子。

<iframe height="300" style="width: 100%;" scrolling="no" title="019 Functions_03" src="https://codepen.io/AhCola/embed/abwzyZa?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/abwzyZa">
  019 Functions_03</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 平移

与旋转，缩放类似。使用`translateX()`、`translateY()`、`translateZ()`可以分别在x、y、z方向上平移元素，`translate3d()`可以在一个函数类定义x、y、z方向上平移的量。
<iframe height="300" style="width: 100%;" scrolling="no" title="019 Functions_04" src="https://codepen.io/AhCola/embed/QWgwMdv?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/QWgwMdv">
  019 Functions_04</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 偏移

`skew()`函数可以使元素偏移，如果传递一个参数，它会将元素在x方向上偏移，如果传递两个参数，x和y方向都会发生偏移。可以使用`skewX()`和`skewY()`单独在某个方向上偏移。
```css
.my-element {
    transform: skew(10deg);
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="019 Functions_05" src="https://codepen.io/AhCola/embed/gORbxRP?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/gORbxRP">
  019 Functions_05</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

`translate`属性可以接受多个变换函数作为值，例如元素先向x方向平移`10px`，在向下平移`10px`，在旋转`10deg`。
```css
.ele {
    transform: translateX(10px) translateY(10px) rotateZ(80deg);;
}
```


（完）