函数

到目前为止,您已经了解了几个 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()

浏览器支持

  • Chrome:26。 <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:16. <ph type="x-smartling-placeholder">
  • Safari:7. <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()

浏览器支持

  • Chrome:79。 <ph type="x-smartling-placeholder">
  • Edge:79。 <ph type="x-smartling-placeholder">
  • Firefox:75。 <ph type="x-smartling-placeholder">
  • Safari:11.1. <ph type="x-smartling-placeholder">

来源

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

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

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

clamp()

浏览器支持

  • Chrome:79。 <ph type="x-smartling-placeholder">
  • Edge:79。 <ph type="x-smartling-placeholder">
  • Firefox:75。 <ph type="x-smartling-placeholder">
  • Safari:13.1. <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-pathoffset-pathshape-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 属性一起使用。

旋转

浏览器支持

  • Chrome:1. <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:3.5。 <ph type="x-smartling-placeholder">
  • Safari:3.1. <ph type="x-smartling-placeholder">

来源

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

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

rotate3d() 函数有四个参数。

浏览器支持

  • Chrome:12. <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:10. <ph type="x-smartling-placeholder">
  • Safari:4. <ph type="x-smartling-placeholder">

来源

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

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

扩缩

浏览器支持

  • Chrome:1. <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:3.5。 <ph type="x-smartling-placeholder">
  • Safari:3.1. <ph type="x-smartling-placeholder">

来源

您可以使用 transformscale() 函数。 该函数接受一个或两个数字作为确定正缩放或负缩放的值。 如果您只定义一个数字参数, X 轴和 Y 轴都会以相同的比例缩放,并且两者都定义了 X 轴和 Y 轴的简写形式。 与rotate()一样, 你有 scaleX(), scaleY()scaleZ() 函数改为在特定轴上缩放元素。

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

rotate 函数一样,还有一个 scale3d() 函数。 这与 scale() 类似,但它使用三个参数:X、Y 和 Z 缩放比例。

翻译

浏览器支持

  • Chrome:1. <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:3.5。 <ph type="x-smartling-placeholder">
  • Safari:3.1. <ph type="x-smartling-placeholder">

来源

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

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

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

偏差

浏览器支持

  • Chrome:1. <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:3.5。 <ph type="x-smartling-placeholder">
  • Safari:3.1. <ph type="x-smartling-placeholder">

来源

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

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

车头朝上

浏览器支持

  • Chrome:36。 <ph type="x-smartling-placeholder">
  • Edge:12。 <ph type="x-smartling-placeholder">
  • Firefox:16. <ph type="x-smartling-placeholder">
  • Safari:9. <ph type="x-smartling-placeholder">

来源

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

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

动画函数、渐变和滤镜

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

检查您的理解情况

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

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

[]
:
{}
()
::

CSS 有内置数学函数?

错误
正确

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

正确
错误

以下哪些是 CSS 形状函数?

rect()
inset()
ellipse()
circle()
polygon()
square()