深入了解 CSS 函数

介绍

CSS 函数被用作各种 CSS 属性的属性。本文将介绍这些函数，包括它们的用法、适用场景以及必要时的“备用”方案（当特定函数不受浏览器支持时）。此外，本文还会提供一些网络上其他相关文章的链接，供您深入学习。阅读本文后，您的 CSS 技能将得到提升。

CSS 函数定义

在大多数现代编程语言中，函数是通过编写function关键字并指定函数名称，后跟一对括号（可以包含函数参数）和包含函数定义的花括号来定义的。

JavaScript 函数示例：

function helloWorld() {
    console.log("Hello world, I am a function");
}

// Call the function
helloWorld(); // Hello world, I am a function

与 JavaScript（或其他语言）不同，在 JavaScript 中，你可以在调用某些函数之前定义它们（如上所示），而 CSS 函数定义是由浏览器厂商编写的，你只需要使用适当的属性调用函数，然后传递必要的参数即可。

语法如下：

property-name: <function name>(arguments)

现在，让我们深入了解细节并进行解释。我们将首先列出各项功能，然后提供详细的解释和代码示例。

CSS 函数

以下列出了各项功能，并根据它们在项目中的使用可能性进行了排序。点击函数名称即可跳转至其说明和浏览器支持页面：

• url()
• rgb()
• rgba()
• hsl()
• hsla()
• attr()
• linear-gradient()
• repeating-linear-gradient()
• radial-gradient()
• repeating-radial-gradient()
• calc()
• cubic-bezier()
• var()
• min()
• max()
• clamp()

你还会找到RGB 和 HSL 颜色函数的备用方法以及CSS 渐变的备用方法。

此外，每个浏览器支持表中的浏览器版本是指该浏览器首次支持该属性的版本。

url()

该url()函数名称是统一资源定位符 (Uniform Resource Locator) 的缩写。它与 CSS 属性一起使用，用于加载网页上使用的外部资源（例如图像或字体文件）。此类属性的示例包括：

• src
• background-image

文件可能位于您的本地计算机、同一网络上的另一台服务器或互联网上。您需要以下列格式之一指定 URL：

• 相对网址
• 绝对网址
• 数据URI

相对网址

相对 URL 用于引用与当前工作目录位于同一目录下或同一服务器上其他目录中的文件。它无需指定服务器地址。

当使用相对 URL 函数时url()，如果文件与 CSS 文件位于同一目录中，则其格式如下：

url('file-location');

在下面的示例中，CSSbackground-image属性（如属性名称所示）用于向页面添加背景图像。这里url()使用的是相对 URL：

.hero-section {
    background-image: url('image.jpg');
}

当文件位于比 CSS 文件更高的目录中时，您可以使用..，这意味着向上移动一个目录。

url('../file-location');

下面的示例@font-face使用了url()向上移动一级的相对 URL 来获取字体文件：

@font-face {
    font-family: "Catamaran-Bold";
    /**
     * Go up one level to the fonts folder and find the Catamaran
     * font inside the Catamaran folder.
     */
    src: url('../fonts/Catamaran/Catamaran-Bold.ttf') format('truetype');
}

/**
 * Now, the font can be used with the font-family property
 */
h1 {
    font-family: "Catamaran-Bold", Verdana, sans-serif;
}

如果是上一级目录，你需要写..两次，用逗号分隔/，这意味着先上一级目录，然后再上一级目录：

url('../../file-location');

下面给出了这种格式的 CSS 代码示例，这次 URL 向上取整两次以获取图像：

.hero-image {
    background-image: url(../../image.jpg);
}

你应该知道，重复的字符..可以是文件夹名称。

url('../my-assets/images/file-location')

因此，您可以参考以下代码示例：

.hero-image {
    background-image: url(../my-assets/images/image.jpg);
}

绝对网址

绝对 URL主要用于引用其他服务器上的文件，但您也可以用它来引用自己服务器上的文件。它的格式如下：

url('protocol://domain/path')

协议可以是以下任何一种：

• http://
• https://
• ftp://
• file://

与该函数一起使用时url()，它采用以下形式：

url('https://server-address/path-to-file');

在以下示例中，url()使用绝对 URL 加载所需的资源.hero-section：

.hero-section {
    background-image: url('https://server-address/images/image.jpg')
}

数据URI

数据 URI 用于指定base-64可缩放矢量图形格式的资源。

url('data:resource-format');

以下示例取自 MDN，使用 data-URI 获取 SVG：

.background {
    background: yellow;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
}

浏览器支持

rgb()

该函数名称取自 RGB，即红、绿、蓝三原色。因此，该函数使用 RGB 模型定义颜色。

它接受三个以逗号分隔的值，可以是介于0 和1 之间的整数值，也可以是介于0 和 1之间的百分比值。这些值指定颜色的强度。02550100%

根据以上信息，显然它rgb()仅适用于用于为网页元素应用颜色的 CSS 属性。此类属性的示例包括：

• background-color
• box-shadow

其语法为：

rgb(<red value>, <green value>, <blue value>);

颜色box-shadow指定方式为rgb()：

.media-card {
    box-shadow: 0 2px 4px rgb(0, 0, 0); /* Black */
}

你可以将前面的例子改写成使用百分比值：

/**
 * Note the percentage values.
 */
.media-card {
    box-shadow: 0 2px 4px rgb(0%, 0%, 0%); /* Black */
}

浏览器支持

rgba()

正常情况下，下一个选择器的背景色应该是黑色，但由于 alpha 透明度值0，它变成了白色。

/**
 * Note the alpha transparency value
 */
body {
  background-color: rgba(0, 0, 0, 0);
}

与之类似rgb()，它也使用 CSS 属性为网页元素应用颜色。例如，background-color上面就演示了这种情况。

浏览器支持

hsl()

HSL 代表色相、饱和度和亮度，这是另一种定义颜色的模型。该函数hsl()使用此模型定义颜色。

其语法为：

hsl(hue, saturation, lightness);

在哪里：

• hue— 色轮上颜色的度数。色轮是一个以度为单位的圆360deg。圆上0（或360）是红色，120是绿色，240是蓝色。
• saturation— 颜色强度，其中0%表示灰色阴影，100%表示全色。
• lightness— 颜色的明度或色调。0%代表黑色，50%是正常色，100%是白色。

让我们调出一种略带浅色调的绿色：

body {
    background-color: hsl(120, 20%, 70%);
}

我建议你尝试使用其他数值，以便更好地理解和体验其中的乐趣。

浏览器支持

hsla()

hsl()与添加透明度参数的情况相同。再次提醒，透明度参数用于指定颜色的不透明度。

body {
    background-color: hsla(120, 20%, 50%, 0.3); /* Super light green */
}

RGB 和 HSL 颜色函数的备份方法

对于不支持 RGB 和 HSL 颜色函数的浏览器，您可以使用十六进制表示法或直接使用颜色名称来代替这些函数，用于将它们作为值一部分的属性：

.media-card {
    box-shadow: 0 2px 4px #000000; /* Black */
}

但如果您使用任何函数来指定颜色，例如：

body {
    background-color: rgb(120%, 79%, 21%);
}

你应该以十六进制表示法或其直接名称提供相同（或其他）颜色作为属性的值（或值的一部分），之后，你再使用 RGB 或 HSL 颜色函数声明相同的属性，因此，对于不支持 RGB 或 HSL 颜色函数的浏览器，级联机制将会启动，浏览器将使用后一种声明。

body {
    background-color: #ffc936;
    background-color: rgb(120%, 79%, 21%);
}

attr()

该函数返回元素的 HTML 属性attr()。此外，您可以将此属性附加或放置在选定的元素上。

此函数主要用于 CSScontent属性。

/**
 * Insert the Image alt attribute after the
 * image itself.
 */
.media-card__image::after {
    content: attr(alt);
}

href以下示例取自 W3Schools，它会在每个链接后插入属性值：

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

浏览器支持

linear-gradient()

CSS 中的渐变效果允许您在两种或多种指定颜色之间显示平滑过渡。渐变效果有两种类型：

• 线性梯度——向下/向上/向左/向右/对角线方向变化，可以用linear-gradient()函数表示（接下来讨论）。
• 径向梯度——它们由中心定义，并用radial-gradient()函数表示。

此linear-gradient()函数将线性渐变设置为所选元素的背景图像。其语法为：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

该direction值可以是以下任意值：

从上到下（默认）

以下示例从上到下依次为：黑色、白色和黑色。

body {
    background-image: linear-gradient(black, white);
}

从左到右

顾名思义，渐变效果是从左到右开始的，使用的关键词如下：

• to
• right

以下渐变色从蓝色开始，过渡到红色。

body {
    background-image: linear-gradient(to right blue, red);
}

对角线

您可以通过指定水平和垂直起始位置来创建渐变。以下是一些伪代码示例：

• 右下角
• 左下角

以下渐变从左上角开始，到右下角结束。

body {
    background-image: linear-gradient(to bottom right blue, red);
}

您还可以使用角度来指定渐变的方向，这样可以更好地控制渐变的方向：

• 0deg相当于to top
• 90deg相当于to right
• 180deg相当于to bottom

如何实现此功能的代码示例留给读者作为练习。

请注意，您不仅限于使用两种颜色，还可以使用多个颜色停止点，如下例所示：

body {
    background-image: linear-gradient(to bottom right, blue, red, aqua);
}

此外，您还可以使用该函数指定颜色rgba()，然后使用alpha 透明度创建淡入淡出效果。如前所述：

透明度值0.0是一个介于（完全透明）和（完全不透明）之间的数字1.0。

body {
    background-image: linear-gradient(to bottom right, rgba(124,65,89,0), #1560bd, rgba(255,0,0,1));
}

以上#1560bd是十六进制颜色表示法，这是另一种指定颜色的方法。它在浏览器中会是什么样子呢？嗯，如果网页是空白的（为什么会有空白页面呢？），看起来可能不太好：

如果网页内容足够丰富，效果可能会很吸引人：

浏览器支持

repeating-linear-gradient()

顾名思义，该函数用于重复线性梯度。

其语法如下：

 background-image: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

在哪里：

• angle— 渐变方向，从0deg到360deg，默认值为180deg。
• side-or-corner— 两个关键字（均为可选），用于定义渐变线的起点。第一个关键字表示水平方向（左侧或右侧），第二个关键字表示垂直方向（顶部或底部）。
• color-stop1，，— 您希望在它们之间渲染平滑过渡的颜色，后面跟着一个可选的停止位置，该位置是介于两者之间的百分比值color-stop2或沿渐变轴的长度。...0%100%

下面给出一个例子：

/**
 * The gradient starts at 75deg and uses 3 color stops.
 * The second color covers just 7% along the gradient.
*/
body {
    background-image: repeating-linear-gradient(75deg, rgba(124,65,89,0), #1560bd 7%, rgba(255,0,0,1) 10%);
}

浏览器支持

radial-gradient()

此函数可将径向渐变设置为网页元素的背景图像。径向渐变从所选元素的中心开始，您必须定义至少两个颜色停止点。

语法如下：

 background-image: radial-gradient(shape size at position, start-color, ..., last-color);

在哪里：

• shape— 渐变形状。默认值为椭圆，另一种选择是圆形。
• size— 渐变的大小，可能的值有farthest-corner、closest-side、closest-corner和farthest-side 。
• position— 渐变的位置。默认值为center。
• start-color，，— 您希望沿其平滑过渡渲染的颜色，其中是颜色值，后跟可选的停止位置（介于和之间的百分比值...或沿渐变轴的长度）。last-color0%100%

下面给出一个具有三个颜色档位的径向渐变的基本示例：

body { 
    background-image: radial-gradient(#1560bd, #cccccc, #1a1a1a);
}

在上面的代码片段中，渐变#1560bd从中心的蓝色开始，#cccccc周围是灰色，最后是#1a1a1a黑色。最终效果是一个椭圆（默认形状），椭圆由三个颜色环组成，颜色环由颜色停止点定义。

您可以根据需要更改椭圆的形状。下面的代码片段会生成一个圆，因为我们在定义颜色停止点之前更改了渐变的形状：

body {
    background-image: radial-gradient(circle, #1560bd, #cccccc, #1a1a1a);
}

此外，您还可以定义渐变的大小。大小决定了渐变从中心向外延伸的幅度。当您使用该值时，渐变在选定元素的中心会显得较小。closest-side

body {
    background-image: radial-gradient(circle closest-side, #1560bd, #cccccc, #1a1a1a);
}

你应该尝试其他数值，例如最远边、最近角等等。

目前，渐变位于中心，您可以根据需要将其向左或向右移动。如果您想将其向左移动，则必须确保该position值小于某个阈 50%值。在下面的代码片段中，渐变将出现在所选元素的左侧，因为position该值已减小到某个阈值26%：

body {
    background-image: radial-gradient(circle closest-side at 26%, #1560bd, #cccccc, #1a1a1a);
}

如果你想让渐变进一步向右移动，请增加position上面的值50%。试试看86%。

请注意，该position值可以指定为两个值，第一个值表示x 轴（水平），第二个值表示y-axis（垂直）。

下面的代码片段中，渐变是40%从选定元素的左侧顶部30%开始移动的：

body {
    background-image: radial-gradient(circle closest-side at 40% 30%, #1560bd, #cccccc, #1a1a1a);
}

浏览器支持

repeating-radial-gradient()

该函数的行为与radial-gradient()重复径向梯度类似，但有一个例外——它重复径向梯度。

你可以将最后一个代码示例转换为使用repeating-radial-gradient()：

body {
    background-image: repeating-radial-gradient(circle closest-side at 40% 30%, #1560bd, #cccccc, #1a1a1a);
}

现在重复应用渐变效果，直到填充整个选定元素的区域。

浏览器支持

CSS渐变的备用方案

background-color对于可能不支持 CSS 渐变的浏览器，本产品提供了备用方案。

body {
    background-color: black;

    /* Specify CSS gradients here */
}

cubic-bezier()

顾名思义，此函数定义了一条三次贝塞尔曲线。维基百科对贝塞尔曲线的定义是：

计算机图形学及相关领域中使用的参数曲线。

贝塞尔曲线由四个点定义P0，，，其中和P1分别是起点和终点。P2P3P0P3

在 CSS 中，这些点是固定的坐标，其中：

• P0是(0, 0)——初始时间和初始状态
• P3是(1, 1)——最终时间和最终状态

该cubic-bezier()函数用于 CSS 中与动画相关的属性，以定义动画速度。这些属性包括 ` animation-timing-functionflash` 和 `flash` transition-timing-function。其语法为：

cubic-bezier(x1,y1,x2,y2);

在哪里：

• x1, y1, x2, y2是必需的数值。x1且必须是介于和 之间的x2数字。01

下面的示例是 W3schools 上一个示例的修改版本，动画开始时速度较慢，到结尾时速度会加快。

div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
    transition-timing-function: cubic-bezier(.32,.3,.9,.21)
}

div:hover {
    width: 300px;
}

以下是HTML代码（不含元数据）：

<p>Hover over the div element below, to see the transition effect.</p>
<div></div>

Lea Verou 开发了一款用于生成贝塞尔曲线值的在线工具。访问cubic-bezier.com即可使用。

浏览器支持

calc()

该calc()函数使用接收的表达式作为参数进行数学计算。该表达式可以是简单的，也可以是复杂的，只要它是有效的表达式，函数就会对其进行计算，并将结果用作属性值。

语法如下：

calc(expression)

在下面的示例中，字体大小的计算方法是calc()：

/**
 * 1rem is 16px,
 * 0.2em is (16px * 2) which is 3.2px
 * Finally, 16px + 3.2px gives 19.2px
 */
p {
    font-size: calc(1rem + 0.2em); 
}

上面的代码片段中的计算假设浏览器的默认字体大小为16px（用户可以轻松更改此大小）。

浏览器支持

var()

在样式表中声明 CSS 变量时，该var()函数用于稍后在样式表中插入变量的值。

其语法为：

var(name, value)

在哪里：

• name— 必填。变量名必须以两个短横线开头--。
• value— 变量未找到时使用的可选备用值。

首先将变量声明为全局变量：

:root {
    --border-color: #1560bd;
    --background-color: #cccccc;
}

然后您可以通过函数使用该变量值var()：

main {
    border: 2px solid var(--border-color);
    background-color: var(--background-color);
}

如果找不到该变量，您可以提供备用值：

main {
    border: 2px solid var(--border-color, #1560bd);
    background-color: var(--background-color, #cccccc);
}

为了方便起见，备用值是:root元素中声明的变量值。您可以根据网站主题使用其他值。

浏览器支持

min()

该min()函数是 CSS 逻辑运算符的一部分（其他运算符包括max()AND clamp()），它允许您提供值列表作为参数，浏览器将确定哪个值最小，并将其用作任何给定时间的实际值。

它允许你指定多个值作为参数，但两个值最容易理解。请看下面的代码片段：

main {
    width: min(1000px, 500px);
}

这里，我们将main宽度设置为min(1000px, 500px)，在任何给定时间，浏览器都会将宽度设置为，main因为500px它总是小于1000px。

现在，我们来调整一下这些数值：

main {
    width: min(1000px, 70%);
}

在这里，当视口大于某个值时1000px，浏览器会将宽度设置为main某个值，1000px因为此时宽度已经超过了浏览器计算出的70%视口宽度，并自动1000px成为最小值，浏览器会将该最小值用作实际宽度main。

请查看以下 GIF 动画，并注意计算出的宽度：

GIF

我需要不断调整缩放级别，以便您能注意到浏览器何时将main宽度设置为1000px。

在较小的视口中（即1000px大于某个阈值70%），浏览器会将宽度设置为某个值，70%因为此时该值70%相对于某个阈值而言是最小值1000px。

既然如此，你应该知道你可以min(1000px, 70%)这样写：

main {
    width: 70%;
    max-width: 1000px;
}

实际上，这意味着在后台max-width使用。但是你应该选择哪一种呢？是使用两行代码的 ` and`，还是使用一行代码的 ` ?`？这个问题留给你自己思考。min()widthmax-widthmin()

浏览器支持

max()

这与相反min()。因为它会从提供的参数列表中选择最大值，浏览器将使用该最大值作为实际值。

沿用之前的例子，让我们把函数名改成max()：

main {
    width: max(1000px, 70%);
}

这里，宽度main最小为1000px，但随着计算值70%增大，1000px浏览器将始终使用该计算值作为的实际宽度main。

在下面的 GIF 中，1000px是最小值，因此浏览器将在该视口大小下使用它，但当缩放级别增加（从而模拟视口大小增加）时，的实际宽度main开始增长：

需要注意的是，这max(1000px, 70%)几乎等同于：

main {
    width: 1000px;
    min-width: 70%;
}

这也意味着min-width使用max()。

请注意以下关于min()和 的规定max()：

• 参数的写法顺序并不重要，函数会选择最小值或最大值作为属性的实际值。
• 这两个函数都可以提供超过 2 个值作为参数。
• min()允许您设定一个最大值，因为它会选择最小的值，而浏览器不允许该值超过此值，因此这就是它所能达到的最大值。
• max()允许您设定一个最小值，因为它会选择最大的值，浏览器会首先使用最小值，如果条件允许，它会继续增长，超过这个最小值。
• 您可以在内部min()或max()不使用内部进行数学计算calc()。例如min(1000px + 10px, 70%)：

现在的问题是：如果你想要一个介于最大值和最小值之间的值该怎么办？你需要解析为clamp()。

浏览器支持

clamp()

通过该clamp函数，您可以设置最小值、最大值以及介于两者之间的理想值。当理想值大于最小值但小于最大值时，浏览器将使用该理想值。

这实际上是同时为一个元素设置了 a width、min-width和属性。max-width

在下面的代码示例中，浏览器将使用，500px因为它的计算值大于5em最小值，但小于最大值50em：

main {
  width: clamp(5em, 500px, 50em);
}

按如下方式调整数值：

main {
  width: clamp(600px, 500px, 50em);
}

这里，600px大于理想值500px，因此浏览器将使用它作为属性的实际值width。

你可以把之前的代码写成：

main {
    width: 500px;
    min-width: 600px;
    max-width: 50em;
}

请注意，该clamp()函数接受 3 个值，少于或多于 3 个值均无效。

浏览器支持

结论

本文详细介绍了 CSS 函数。我鼓励大家继续探索，加深对 CSS 的理解。在后续文章中，我们将探讨其中一些函数的实际应用。感谢阅读。

参考

• 📚 Firefox 75：四月展望
• 📹 min()、max() 和 clamp() 是 CSS 的魔法！
• 📚 CSS 值和单位模块第四级：比较函数：min()、max() 和 clamp()
• 📚绝对 URL 和相对 URL 有什么区别？

延伸阅读

• 📚 min()、max() 和 clamp()：今天可以使用的三个逻辑 CSS 函数
• 📚我在 CSS 中学到的关于 min()、max() 和 clamp() 的所有知识
• 📚关于CSS函数的指南min()max()clamp()

鸣谢

所有浏览器支持表均由W3Schools和MDN提供。

封面照片由Maik Jonietz拍摄，来自Unsplash。