CSS 函数

CSS 函数 (Functions) 是 CSS 属性值的组成部分，它们接受参数并返回一个值。这些函数极大地扩展了 CSS 的能力，允许进行动态计算、访问属性值、处理颜色等。

calc()

calc() 函数可能是最常用和最强大的 CSS 函数。它允许你在 CSS 属性值中执行数学计算。你可以在 +, -, *, / 运算符的两侧使用不同的单位。

注意: + 和 - 运算符的两侧必须有空格，而 * 和 / 则没有此要求（但为了可读性，建议也加上空格）。

:root {
  --header-height: 60px;
}

.content {
  /* 计算视口高度减去头部高度 */
  height: calc(100vh - var(--header-height));
}

.element {
  /* 混合不同单位 */
  width: calc(100% - 2rem);
}

var()

var() 函数用于插入 CSS 自定义属性（变量）的值。它接受两个参数：要插入的自定义属性的名称，以及一个可选的备用值。

:root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
  /* 如果 --button-padding 未定义，则使用 10px 20px */
  padding: var(--button-padding, 10px 20px);
}

attr()

attr() 函数用于获取所选元素上某个 HTML 属性的值，并将其用于样式中。目前，它主要用于 content 属性，但未来的 CSS 规范可能会扩展其用途。

<a href="..." data-tooltip="这是一个链接">链接</a>

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

[data-tooltip]::before {
  content: attr(data-tooltip);
  /* ...其他用于创建工具提示的样式... */
}

颜色函数

CSS 提供了多种函数来定义和操作颜色。

• rgb(r, g, b): 使用红、绿、蓝三个通道（0-255）定义颜色。
• rgba(r, g, b, a): 与 rgb() 相同，但增加了一个 alpha 透明度通道（0 到 1）。
• hsl(h, s, l): 使用色相 (0-360)、饱和度 (%) 和亮度 (%) 定义颜色。这种方式更直观。
• hsla(h, s, l, a): 带有 alpha 透明度通道的 hsl()。

.element {
  color: rgb(255, 0, 0); /* 红色 */
  background-color: rgba(0, 0, 255, 0.5); /* 半透明的蓝色 */
  border-color: hsl(120, 100%, 50%); /* 纯绿色 */
}

渐变函数

这些函数用于创建 <gradient> 数据类型，通常用在 background-image 属性中。

• linear-gradient(): 创建线性渐变。
• radial-gradient(): 创建径向渐变。
• repeating-linear-gradient(): 创建重复的线性渐变。
• repeating-radial-gradient(): 创建重复的径向渐变。

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

.radial {
  background-image: radial-gradient(circle, white, green);
}

url()

url() 函数用于包含一个外部文件，最常用于 background-image 或 @font-face。

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

@font-face {
  font-family: 'MyFont';
  src: url('path/to/font.woff2') format('woff2');
}

掌握这些 CSS 函数，可以让你编写出更灵活、更动态、更可维护的样式代码。