Chrome 将于 5 月 20-21 日重返 Google I/O！立即注册

函数
通过合集保持井井有条根据您的偏好保存内容并进行分类。

CSS 播客 - 020：函数

到目前为止，在本课程中，您已经接触过多个 CSS 函数。在网格模块中，您了解了 minmax() 和 fit-content()，它们可以帮助您调整元素大小。在颜色模块中，您了解了 rgb() 和 hsl()，它们可以帮助您定义颜色。

与许多其他编程语言一样，CSS 具有大量内置函数，您可以在需要时随时访问它们。

每个 CSS 函数都有特定的用途，在本课程中，您将获得一个高级概述，从而更好地了解在何处以及如何使用它们。

什么是函数？

函数是一段命名的、独立的、用于完成特定任务的代码。函数被命名，以便您可以在代码中调用它，并且可以将数据传递到函数中。这称为传递参数。

A diagram of a function as described above

许多 CSS 函数都是纯函数，这意味着如果您向它们传递相同的参数，它们将始终返回相同的结果，而与代码其余部分发生的情况无关。这些函数通常会在 CSS 中的值更改时重新计算，类似于语言中的其他元素，例如计算出的级联值，如 currentColor。

在 CSS 中，您只能使用提供的函数，而不能编写自己的函数，但在某些情况下，函数可以相互嵌套，从而使其更具灵活性。我们将在本模块的后面部分更详细地介绍这一点。

功能选择器

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

您在伪类模块中了解了功能选择器，其中详细介绍了诸如 :is() 和 :not() 之类的函数。传递给这些函数的参数是 CSS 选择器，然后对其进行评估。如果与元素匹配，则 CSS 规则的其余部分将应用于它们。

自定义属性和 `var()`

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

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

自定义属性是一个变量，允许您标记 CSS 代码中的值。自定义属性也受层叠影响，这意味着它们可以在上下文中进行操作或重新定义。自定义属性必须以两个破折号 (--) 为前缀，并且区分大小写。

var() 函数接受一个必需的参数：您尝试作为值返回的自定义属性。在上面的代码片段中，var() 函数将 --base-color 作为参数传递。如果定义了 --base-color，则 var() 将返回值。

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

您还可以将回退声明值传递到 var() 函数中。这意味着，如果找不到 --base-color，则将改为使用传递的声明，在本例中为 hotpink 颜色。

返回值的函数

var() 函数只是返回值的 CSS 函数之一。诸如 attr() 和 url() 之类的函数遵循与 var() 类似的结构 — 您传递一个或多个参数并在 CSS 声明的右侧使用它们。

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

此处的 attr() 函数正在获取 <a> 元素的 href 属性的内容，并将其设置为 ::after 伪元素的 content。如果 <a> 元素的 href 属性的值发生更改，则会自动反映在此 content 属性中。

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

url() 函数采用 string URL，用于加载图像、字体和内容。如果未传入有效的 URL，或者找不到 URL 指向的资源，则 url() 函数将不返回任何内容。

颜色函数

您在颜色模块中了解了所有关于颜色函数的信息。如果您尚未阅读该模块，强烈建议您阅读。

CSS 中一些可用的颜色函数包括 rgb()、rgba()、hsl()、hsla()、hwb()、lab() 和 lch()。所有这些函数都具有类似的形式，即传入配置参数并返回颜色。

数学表达式

与许多其他编程语言一样，CSS 提供了有用的数学函数来帮助进行各种类型的计算。

calc()

浏览器支持

来源

calc() 函数将单个数学表达式作为其参数。此数学表达式可以是多种类型的混合，例如长度、数字、角度和频率。单位也可以混合使用。

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

在此示例中，calc() 函数用于将元素的宽度调整为其包含父元素的 100%，然后从该计算值中减去 2rem。

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

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

calc() 函数可以嵌套在另一个 calc() 函数中。您还可以在表达式中传递 var() 函数中的自定义属性。

`min()` 和 `max()`

浏览器支持

来源

min() 函数返回一个或多个传递参数的最小计算值。max() 函数的作用相反：获取一个或多个传递参数的最大值。

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

在此示例中，宽度应为 20vw（即视口宽度的 20%）和 30rem 之间的最小值。高度应为 20vh（即视口高度的 20%）和 20rem 之间的最大值。

注意：我们在尺寸单位模块中介绍了诸如 vw 和 vh 之类的单位。

clamp()

浏览器支持

来源

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

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

在此示例中，font-size 将根据视口的宽度而流动。vw 单位添加到 rem 单位是为了帮助屏幕缩放，因为无论缩放级别如何，vw 单位的大小都相同。乘以 rem 单位（基于根字体大小）为 clamp() 函数提供相对计算点。

您可以在本文中了解有关 min()、max() 和 clamp() 函数的更多信息。

形状

clip-path、offset-path 和 shape-outside CSS 属性使用形状以可视方式剪裁您的框或为内容流动提供形状。

有一些形状函数可以与这两个属性一起使用。诸如 circle()、ellipse() 和 inset() 之类的简单形状采用配置参数来调整其大小。诸如 polygon() 之类的更复杂形状采用逗号分隔的 X 轴和 Y 轴值对来创建自定义形状。

.circle {
  clip-path: circle(50%);
}

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

与 polygon() 类似，还有一个 path() 函数，它将 SVG 填充规则作为参数。这允许使用高度复杂的形状，这些形状可以在诸如 Illustrator 或 Inkscape 之类的图形工具中绘制，然后复制到您的 CSS 中。

变换

CSS 函数概述中的最后一个是变换函数，它可以倾斜、调整大小甚至更改元素的深度。以下所有函数都与 transform 属性一起使用。

旋转

浏览器支持

来源

您可以使用 rotate() 函数旋转元素，该函数将使元素绕其中心轴旋转。您还可以使用 rotateX()、rotateY() 和 rotateZ() 函数在特定轴上旋转元素。您可以传递 degree、turn 和 radian 单位来确定旋转级别。

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

rotate3d() 函数接受四个参数。

浏览器支持

来源

前 3 个参数是数字，用于定义 X、Y 和 Z 坐标。第四个参数是旋转，与其他旋转函数一样，它接受度数、角度和圈数。

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

缩放

浏览器支持

来源

您可以使用 transform 和 scale() 函数更改元素的缩放比例。该函数接受一个或两个数字作为值，以确定正缩放或负缩放。如果您仅定义一个数字参数，则 X 轴和 Y 轴都将按相同的比例缩放，而定义两个参数是 X 轴和 Y 轴的简写。就像 rotate() 一样，还有 scaleX()、scaleY() 和 scaleZ() 函数，用于在特定轴上缩放元素。

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

也像 rotate 函数一样，还有一个 scale3d() 函数。这与 scale() 类似，但它接受三个参数：X、Y 和 Z 比例因子。

平移

浏览器支持

来源

translate() 函数在元素保持其在文档流中的位置的同时移动元素。它们接受长度和百分比值作为参数。如果定义了一个参数，则 translate() 函数沿 X 轴平移元素；如果定义了两个参数，则沿 X 轴和 Y 轴平移元素。

.my-element {
  transform: translatex(40px) translatey(25px);
}

您可以像使用其他变换函数一样，使用特定轴的特定函数，使用 translateX、translateY 和 translateZ。您还可以使用 translate3d，它允许您在一个函数中定义 X、Y 和 Z 平移。

倾斜

浏览器支持

来源

您可以使用 skew() 函数倾斜元素，该函数接受角度作为参数。skew() 函数的工作方式与 translate() 非常相似。如果您仅定义一个参数，则它只会影响 X 轴；如果您定义了两个参数，则它将影响 X 轴和 Y 轴。您还可以使用 skewX 和 skewY 来独立影响每个轴。

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

透视

浏览器支持

来源

最后，您可以使用 perspective 属性（它是变换属性系列的一部分）来更改用户与 Z 平面之间的距离。这会产生距离感，并且可以用于在您的设计中创建景深。

David Desandro 在其非常有用的文章中给出的这个示例展示了如何将其与 perspective-origin-x 和 perspective-origin-y 属性结合使用来创建真正的 3D 体验。

动画函数、渐变和滤镜

CSS 还提供了帮助您为元素添加动画效果、向其应用渐变以及使用图形滤镜来操纵其外观的函数。为了使本模块尽可能简洁，它们在链接的模块中进行了介绍。它们都遵循与本模块中演示的函数类似的结构。

检查您的理解情况

测试您对函数的了解

CSS 函数可以通过哪些字符来识别？

[]

这些字符用于 Javascript 中的数组。

{}

这些字符用于包装 CSS 中的规则。

()

函数使用这些字符来包装参数，没错！

::

这些字符用于 CSS 中的伪元素。

:

这些字符用于 CSS 中的伪类。

CSS 是否具有内置的数学函数？

正确

有很多，而且越来越多的函数被添加到规范和浏览器中！

错误

再试一次！

calc() 函数可以放在另一个 calc() 函数中，例如 font-size: calc(10px + calc(5px * 3));

正确

🎉

错误

再试一次！

以下哪些是 CSS 形状函数？

ellipse()

🎉

square()

再试一次！

circle()

🎉

rect()

再试一次！

inset()

🎉

polygon()

🎉

函数 通过合集保持井井有条 根据您的偏好保存内容并进行分类。

CSS 播客 - 020：函数

什么是函数？

功能选择器

自定义属性和 var()

返回值的函数

颜色函数

数学表达式

calc()

min() 和 max()

clamp()

形状

变换

旋转

缩放

平移

倾斜

透视

动画函数、渐变和滤镜

检查您的理解情况

函数
通过合集保持井井有条根据您的偏好保存内容并进行分类。

自定义属性和 `var()`

`min()` 和 `max()`