CSS基础教程

主页资讯文章代码电子书

CSS函数

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

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

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

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

一.函数是什么？

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

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

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

二.函数选择器

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

在伪类中介绍过:is()和:not()的作用。:is()和:not()接受的参数为css选择器，它们用于选择和过滤元素。

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

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

.my-element {
    background: var(--base-color);
}

自定义属性也叫做CSS变量。自定义属性名称必须以双横线（--）开头，表示它是一个自定义属性（css变量）。

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

.my-element {
    background: var(--base-color, hotpink);
}

你还可以给var()函数传递第二个参数，表示如果没有找到--base-color的定义，函数会以hotpink作为返回值（输出）。

四.有返回值的函数

并不是所有函数都有返回值得。var()函数恰好是一个有返回值的函数。attr()和url()函数与var()类似，你可以向它们传递一个或者多个参数，然后将它们作为css声明的属性值。

a::after {
    content: attr(href);
}

上面的代码，将<a>元素的href属性值与::after伪类元素的内容绑定，当href属性变化时，::after伪类的内容也会变化。

.my-element {
    background-image: url('/path/to/image.jpg');
}

url()函数接受一个URL字符串，用于加载图片、字体和内容。如果没有传递一个有效的url或者url指示的资源找不到了，那么url()函数不会返回任何值。

五.颜色函数

在颜色章节中，我们介绍过与颜色相关的所有函数。如果你还没有看过这篇文章，强烈建议你去看一下。

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

六.数学表达式

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

`calc()`

calc()接受一个数学表达式作为参数，返回该表达式的结果。

.ele {
    width: calc(100% - 2rem);
}

上面的代码，calc()的计算结果是.ele元素的容器元素的高度减去2rem，然后将结果作为.ele的宽度。

calc函数可以嵌套使用，你还可以将var()函数作为表达式参数的一部分。

:root {
  --root-height: 5rem;
}

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

`min()`和`max()`

通过名称，就知道这两个函数是用来计算最大值和最小值的，它们都接受两个参数，返回两个数中的最小值和最大值。

.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)的目的是要找到三个数的中间值。

如果VAL在MIN和MAX之间，结果为VAL。
如果VAL小于MIN，结果为MIN。
如果VAL大于MAX，结果为MAX。

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

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

七.形状

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

例如一些简单的形状函数，circle()、ellipse()和inset，还有一些更复杂的函数，例如polygon()。

.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等角度单位值作为参数。

.my-element {
    transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

还有一个rotate3d()函数，接受4个参数，前三个参数是数字，定义X、Y、Z坐标，第四个参数表示角度。

.my-element {
    transform: rotate3d(1, 1, 1, 10deg);
}

缩放

scale()函数用于缩放元素。同样有scaleX()、scaleY()、scaleZ()，用于缩放不同轴方向的尺寸。

.my-element {
    transform: scaleX(1.2) scaleY(1.2);
}

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

平移

与旋转，缩放类似。使用translateX()、translateY()、translateZ()可以分别在x、y、z方向上平移元素，translate3d()可以在一个函数类定义x、y、z方向上平移的量。

偏移

skew()函数可以使元素偏移，如果传递一个参数，它会将元素在x方向上偏移，如果传递两个参数，x和y方向都会发生偏移。可以使用skewX()和skewY()单独在某个方向上偏移。

.my-element {
    transform: skew(10deg);
}

translate属性可以接受多个变换函数作为值，例如元素先向x方向平移10px，在向下平移10px，在旋转10deg。

.ele {
    transform: translateX(10px) translateY(10px) rotateZ(80deg);;
}

（完）