函数

CSS 播客 - 第 020 集：函数

在本课程的学习过程中，您已经接触了多个 CSS 函数。在 grid 模块中，您已了解 minmax() 和 fit-content()，它们可帮助您调整元素大小。在 color 模块中，您已了解 rgb() 和 hsl()，它们可帮助您定义颜色。

与许多其他编程语言一样，CSS 具有许多内置函数，您可以随时使用这些函数。

每个 CSS 函数都有特定用途，在本课程中，您将大致了解这些函数，从而更好地了解在何处以及如何使用它们。

什么是函数？

函数是用于完成特定任务的命名且独立的代码段。为函数命名是为了便于您在代码中调用该函数，以及向该函数传递数据。这称为传递参数。

如上所述的函数示意图

许多 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() 函数接受字符串网址，用于加载图片、字体和内容。如果未传入有效网址，或者找不到网址指向的资源，url() 函数将不会返回任何内容。

颜色函数

您已在 color 模块中全面了解了颜色函数。 如果您尚未阅读该文章，我们强烈建议您阅读。

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

数学表达式

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

calc()

Browser Support

  • Chrome: 26.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 7.

Source

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()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

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

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

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

clamp()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Source

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 函数，它可以使元素倾斜、调整大小，甚至更改元素的深度。以下所有函数都与 transform 属性搭配使用。

旋转

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

您可以使用 rotate() 函数旋转元素，该函数会沿元素的中心轴旋转元素。您还可以改用 rotateX()、rotateY() 和 rotateZ() 函数沿特定轴旋转元素。您可以传递度数、转数和弧度单位来确定旋转角度。

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

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

Browser Support

  • Chrome: 12.
  • Edge: 12.
  • Firefox: 10.
  • Safari: 4.

Source

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

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

扩缩

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

您可以使用 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 缩放比例。

翻译

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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

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

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

Skewing

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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

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

车头朝上

Browser Support

  • Chrome: 36.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

最后，您可以使用 perspective 属性（属于“转换”属性族）来更改用户与 Z 平面之间的距离。这会营造距离感，可用于在设计中营造景深。

David Desandro 在其非常实用的文章中提供了以下示例，展示了如何将该属性与 perspective-origin-x 和 perspective-origin-y 属性搭配使用，以打造真正的 3D 体验。

动画函数、渐变和滤镜

CSS 还提供了一些函数，可帮助您为元素animate、为元素应用渐变，以及使用图形滤镜来操控元素的外观。为使本单元尽可能简洁，相关内容在链接的模块中进行了介绍。它们的结构与本模块中演示的函数类似。

检查您的理解情况

测试您对函数的了解

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

[]
这些字符适用于 Javascript 中的数组。
{}
这些字符用于在 CSS 中换行。
()
函数使用这些字符来封装参数
::
这些字符适用于 CSS 中的伪元素。
:
这些字符用于 CSS 中的伪类。

CSS 是否有内置数学函数？

正确
有许多这样的功能，并且规范和浏览器中还会添加更多此类功能！
错误
再试一次！

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

正确
🎉
错误
再试一次！

以下哪些是 CSS 形状函数？

ellipse()
🎉
square()
再试一次！
circle()
🎉
rect()
再试一次！
inset()
🎉
polygon()
🎉