感谢您关注 Google I/O 大会！观看点播内容。

此页面由 Cloud Translation API 翻译。

函数

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

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

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

在此示例中，calc() 函数用于调整元素的宽度与其包含的父元素完全相同，然后从该计算值中移除 2rem。

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

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

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

`min()`和`max()`

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

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

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

注意：我们在尺寸调整单元模块中介绍了 vw 和 vh 等单位。

clamp()

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

clamp() 函数有三个参数：最小大小、理想尺寸和最大值

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

在此示例中，font-size 将根据视口的宽度调整为自适应尺寸。向 rem 单元添加了 vw 单元，用于协助缩放屏幕，因为无论缩放级别如何，vw 单元的大小都相同。乘以 rem 的单位（根据根字号）：为 clamp() 函数提供相对计算点。

如需详细了解 min()、max() 和 clamp() 函数，请参阅这篇文章。

形状

通过 clip-path、 offset-path和 shape-outside CSS 属性使用形状在视觉上裁剪您的 Box，或提供一种形状以便内容四处流动。

有一些形状函数可与这两个属性一起使用。简单的形状，例如 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 属性一起使用。

旋转

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

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

rotate3d() 函数有四个参数。

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

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

扩缩

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

翻译

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

translate() 函数可在保持元素在文档流中的位置不变的同时移动元素。它们接受长度值和百分比值作为参数。如果定义了一个实参，translate() 函数会沿着 X 轴平移元素，并沿 X 轴和 Y 轴平移元素（如果这两个参数都已定义）。

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

您可以像处理其他转换函数一样，对特定轴使用特定函数，使用 translateX、 translateY和 translateZ。您还可以使用 translate3d 让您可以在一个函数中定义 X、Y 和 Z 平移。

偏差

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

您可以使用 skew() 接受角度作为参数的函数。 skew() 函数的工作方式与 translate() 非常相似。如果只定义一个参数，它只会影响 X 轴，如果同时定义两个参数，会影响 X 轴和 Y 轴您还可以使用 skewX和 skewY 可单独影响每个轴。

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

车头朝上

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

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

这个示例由 David Desandro 撰写，摘自一篇非常实用的文章，展示了如何使用它。以及 perspective-origin-x 和 perspective-origin-y 属性来打造真正的 3D 体验。

动画函数、渐变和滤镜

CSS 还提供一些功能，可帮助您为元素添加动画，对它们应用渐变效果，并使用图形滤镜来调整它们的外观。为使本单元尽可能简洁它们在关联的模块中进行了介绍它们都采用与本单元所演示函数类似的结构。

检查您的理解情况

测试您对函数知识的掌握情况

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

[]

这些字符适用于 JavaScript 中的数组。

{}

CSS 中的这些字符换行规则。

()

函数使用这些字符来封装参数！

::

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

:

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

CSS 有内置数学函数？

正确

该 API 有很多，并且还会向规范和浏览器中添加更多属性！

错误

再试一次！

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