掌握 CSS 函数：提升开发效率与代码优雅

在这个数字化时代，网页设计的美观与功能性同等重要，而 CSS 正是连接这两者的桥梁。CSS 函数就像是网页设计师手中的魔法棒，轻轻一挥，就能实现各种令人惊叹的效果。从改变颜色到布局，再到创建动画和响应式设计，CSS 函数提供了丰富的工具，让我们的网页活起来。接下来，让我们一起探索一些常用的 CSS 函数，在我们的项目中巧妙运用它们，一起深入 CSS 函数的世界，开启设计的新篇章！

一、计算和单位转换

1、calc()

• 说明：calc() 函数允许在计算属性值时使用简单的数学表达式。这个函数非常有用，因为它可以帮助我们动态地计算元素的大小、位置等属性值。
• 语法：calc(expression)
• 参数：
  • expression: 数学表达式，可以包括加法 (+)，减法 (-)，乘法 (*)，除法 (/) 以及各种单位（如像素 px，百分比 %，em，rem，vw，vh 等）。
• 示例：

  div {
    width: calc(100% - 20px); /* 计算宽度：总宽度减去20像素 */
  }
  

  这个例子中，div 的宽度将是它的父元素宽度减去 20 像素。

2、clamp()

• 说明：clamp() 函数确保一个数值在指定的最小值和最大值之间。这对于响应式设计特别有用，可以确保元素的尺寸不会超出预定范围。
• 语法：clamp(min, value, max)
• 参数：
  • min：最小值。
  • value：首选值。
  • max：最大值。
• 示例：

  p {
    font-size: clamp(1rem, 3vw, 2rem); /* 字体大小在1rem和2rem之间，取决于视口宽度 */
  }
  

  这个例子中，字体大小将在 1rem 和 2rem 之间变化，但不会超过 3vw 的比例。

3、min()

• 说明：min() 函数返回一组数值中的最小值。当需要限制元素的最大尺寸时非常有用。
• 语法：min(value1, value2, ...)
• 参数：
  • value1, value2, ...：一系列的数值或表达式。
• 示例：

  .box {
    width: min(50%, 200px); /* 宽度取50%和200px中的较小者 */
  }
  

  这个例子中，.box 的宽度将是 50% 和 200px 中的较小者。

4、max()

• 说明：max() 函数返回一组数值中的最大值。当需要确保元素至少具有某个最小尺寸时非常有用。
• 语法：max(value1, value2, ...)
• 参数：
  • value1, value2, ...：一系列的数值或表达式。
• 示例：

  .box {
    height: max(50%, 300px); /* 高度取50%和300px中的较大者 */
  }
  

  这个例子中，.box 的高度将是 50% 和 300px 中的较大者。

5、fit-content()

• 说明：fit-content() 函数根据内容自动调整大小，同时考虑容器的限制。这使得元素可以根据其内部内容自动调整大小，同时不会超出容器的边界。
• 语法：fit-content([min-content | max-content | auto]?)
• 参数：
  • min-content：元素刚好容纳所有内容的最小宽度。
  • max-content：元素刚好容纳所有内容的最大宽度。
  • auto：默认值，与 min-content 相同。
• 示例：

  .container {
    width: fit-content(); /* 根据内容自动调整宽度 */
  }
  

  这个例子中，.container 的宽度将根据其内部内容自动调整。

二、颜色函数

6、rgb() / rgba()

• 说明：rgb() 用于定义红绿蓝颜色模型的颜色值，rgba() 在此基础上增加了透明度。RGB 颜色由红、绿、蓝三种颜色组成，每种颜色的值范围从 0 到 255。
• 语法：rgb(red, green, blue) 或 rgba(red, green, blue, alpha)
• 参数：
  • red, green, blue：介于 0 至 255 之间的整数。
  • alpha：介于 0 至 1 之间的浮点数，表示透明度。
• 示例：

  body {
    background-color: rgba(255, 0, 0, 0.5); /* 半透明红色背景 */
  }
  

  这个例子中，背景色为半透明的红色。

7、hsl() / hsla()

• 说明：hsl() 使用色调（Hue）、饱和度（Saturation）和亮度（Lightness）来定义颜色，hsla() 在此基础上增加了透明度。
• 语法：hsl(hue, saturation, lightness) 或 hsla(hue, saturation, lightness, alpha)
• 参数：
  • hue：介于 0 至 360 之间的数值，表示颜色的色调。
  • saturation：介于 0% 至 100% 之间的数值，表示颜色的饱和度。
  • lightness：介于 0% 至 100% 之间的数值，表示颜色的亮度。
  • alpha：介于 0 至 1 之间的浮点数，表示透明度。
• 示例：

  body {
    color: hsla(120, 100%, 50%, 0.75); /* 青绿色文字 */
  }
  

  这个例子中，文本颜色为青绿色，并且有一定的透明度。

8、color()

• 说明：color() 函数允许根据当前颜色模式进行颜色计算。这通常用于更复杂的颜色调整，例如在不同颜色模式（如 sRGB 和 Lab）之间转换。
• 语法：color(color-model, color-values...)
• 参数：
  • color-model：颜色模型名称，如 srgb、lab 等。
  • color-values...：根据颜色模型的不同，需要提供相应的颜色值。
• 示例：

  .text {
    color: color(srgb 255 0 0); /* 标准 RGB 红色 */
  }
  

  这个例子中，文本颜色为标准的红色。

9、lab() / lch()

• 说明：lab() 和 lch() 基于 CIE Lab 色彩空间定义颜色。lab() 使用 L（亮度）、a 和 b 分量，而 lch() 使用 L（亮度）、C（色度）和 H（色调）。
• 语法：lab(L, a, b) 或 lch(L, C, H)
• 参数：
  • L：介于 0 至 100 之间的数值，表示亮度。
  • a, b：介于 -128 至 127 之间的数值，表示颜色分量。
  • C：介于 0 至 100 之间的数值，表示色度。
  • H：介于 0 至 360 之间的数值，表示色调。
• 示例：

  .element {
    background-color: lab(50 20 30); /* Lab 色彩空间定义的颜色 */
  }
  

  这个例子中，背景色使用了 Lab 色彩空间定义的颜色。

10、color-mix()

• 说明：color-mix() 函数混合两种或多种颜色，可以指定颜色模式。
• 语法：color-mix(in color-model, color1, color2, ...)
• 参数：
  • in color-model：颜色混合使用的颜色模型。
  • color1, color2, ...：需要混合的颜色。
• 示例：

  .gradient {
    background-color: color-mix(in srgb red, blue 50%); /* 混合红色和蓝色 */
  }
  

  这个例子中，背景色为红色和蓝色的混合色。

11、color-mod()

• 说明：color-mod() 函数调整颜色的亮度、饱和度等。
• 语法：color-mod(color, mode, amount)
• 参数：
  • color：需要调整的颜色。
  • mode：调整模式，如 brighter、darker 等。
  • amount：调整的幅度。
• 示例：

  .modified-color {
    color: color-mod(red brighter(20%)); /* 提亮红色 */
  }
  

  这个例子中，文本颜色为提亮后的红色。

三、渐变函数

12、linear-gradient()

• 说明：linear-gradient() 创建线性渐变背景，可以指定方向。
• 语法：linear-gradient(direction, color-stop1, color-stop2, ...)
• 参数：
  • direction：渐变的方向，可以是角度或关键字（如 to right）。
  • color-stop1, color-stop2, ...：颜色停止点列表。
• 示例：

  .gradient {
    background-image: linear-gradient(to right, red, yellow); /* 从左到右渐变 */
  }
  

  这个例子中，背景为从左到右的红色到黄色的渐变。

13、repeating-linear-gradient()

• 说明：repeating-linear-gradient() 创建重复的线性渐变背景，适用于图案填充。
• 语法：repeating-linear-gradient(direction, color-stop1, color-stop2, ...)
• 参数：
  • direction：渐变的方向。
  • color-stop1, color-stop2, ...：颜色停止点列表。
• 示例：

  .gradient {
    background-image: repeating-linear-gradient(to bottom, blue, blue 10px, white 10px, white 20px); /* 重复的渐变图案 */
  }
  

  这个例子中，背景为重复的蓝色和白色条纹。

14、radial-gradient()

• 说明：radial-gradient() 创建径向渐变背景。
• 语法：radial-gradient(shape size at position, color-stop1, color-stop2, ...)
• 参数：
  • shape：形状，如 circle 或 ellipse。
  • size：大小。
  • position：位置。
  • color-stop1, color-stop2, ...：颜色停止点列表。
• 示例：

  .gradient {
    background-image: radial-gradient(circle at center, red, yellow); /* 从中心扩散的渐变 */
  }
  

  这个例子中，背景为从中心扩散的红色到黄色的渐变。

15、repeating-radial-gradient()

• 说明：repeating-radial-gradient() 创建重复的径向渐变背景。
• 语法：repeating-radial-gradient(shape size at position, color-stop1, color-stop2, ...)
• 参数：
  • shape：形状。
  • size：大小。
  • position：位置。
  • color-stop1, color-stop2, ...：颜色停止点列表。
• 示例：

  .gradient {
    background-image: repeating-radial-gradient(circle at center, blue, blue 10px, white 10px, white 20px); /* 重复的径向渐变图案 */
  }
  

  这个例子中，背景为重复的蓝色和白色圆形图案。

16、conic-gradient()

• 说明：conic-gradient() 创建锥形渐变背景。
• 语法：conic-gradient(from angle at position, color-stop1, color-stop2, ...)
• 参数：
  • angle：起始角度。
  • position：位置。
  • color-stop1, color-stop2, ...：颜色停止点列表。
• 示例：

  .gradient {
    background-image: conic-gradient(from 180deg at center, red, yellow); /* 锥形渐变 */
  }
  

  这个例子中，背景为从中心扩散的红色到黄色的锥形渐变。

四、变换函数

17、translate()

• 说明：translate() 函数用于沿 x 和 y 轴平移元素。
• 语法：translate(tx, ty)
• 参数：
  • tx：沿 x 轴平移的距离。
  • ty：沿 y 轴平移的距离。
• 示例：

  .move {
    transform: translate(50px, 50px); /* 向右下角移动 */
  }
  

  这个例子中，元素 .move 向右平移 50 像素，向下平移 50 像素。

18、translateX() / translateY() / translateZ()

• 说明：这些函数用于单独沿 x、y 或 z 轴平移元素。
• 语法：translateX(tx) 或 translateY(ty) 或 translateZ(tz)
• 参数：
  • tx：沿 x 轴平移的距离。
  • ty：沿 y 轴平移的距离。
  • tz：沿 z 轴平移的距离。
• 示例：

  .move {
    transform: translateX(50px); /* 向右平移 */
  }
  

  这个例子中，元素 .move 向右平移 50 像素。

19、scale() / scaleX() / scaleY() / scaleZ()

• 说明：这些函数用于缩放元素的尺寸。
• 语法：scale(sx, sy) 或 scaleX(sx) 或 scaleY(sy) 或 scaleZ(sz)
• 参数：
  • sx：沿 x 轴缩放的比例。
  • sy：沿 y 轴缩放的比例。
  • sz：沿 z 轴缩放的比例。
• 示例：

  .resize {
    transform: scaleX(2); /* 横向放大两倍 */
  }
  

  这个例子中，元素 .resize 横向放大两倍。

20、rotate() / rotateX() / rotateY() / rotateZ()

• 说明：这些函数用于旋转元素。
• 语法：rotate(angle) 或 rotateX(angle) 或 rotateY(angle) 或 rotateZ(angle)
• 参数：
  • angle：旋转的角度。
• 示例：

  .rotate {
    transform: rotate(45deg); /* 绕自身轴旋转45度 */
  }
  

  这个例子中，元素 .rotate 绕自身轴旋转 45 度。

21、skew() / skewX() / skewY()

• 说明：这些函数用于倾斜元素。
• 语法：skew(ax, ay) 或 skewX(ax) 或 skewY(ay)
• 参数：
  • ax：沿 x 轴倾斜的角度。
  • ay：沿 y 轴倾斜的角度。
• 示例：

  .skew {
    transform: skewX(-15deg); /* 沿x轴倾斜 */
  }
  

  这个例子中，元素 .skew 沿 x 轴倾斜 15 度。

22、matrix() / matrix3d()

• 说明：这些函数用于使用矩阵来变换元素。
• 语法：matrix(a, b, c, d, e, f) 或 matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)
• 参数：
  • a, b, c, d, e, f： 矩阵的各个分量。
  • g, h, i, j, k, l, m, n, o, p：三维矩阵的各个分量。
• 示例：

  .matrix {
    transform: matrix(0.6, 0.8, -0.8, 0.6, 0, 0); /* 复杂的二维变换 */
  }
  

  这个例子中，元素 .matrix 使用了一个二维矩阵进行复杂变换。

五、图像和滤镜函数

23、url()

• 说明：url() 函数用于定义图像资源的 URL。
• 语法：url(path)
• 参数：
  • path：图像文件的路径。
• 示例：

  body {
    background-image: url('background.jpg'); /* 设置背景图片 */
  }
  

  这个例子中，背景图像是 background.jpg 文件。

24、image-resolution()

• 说明：image-resolution 属性用于设置图像的显示分辨率。
• 语法：image-resolution(resolution)
• 参数：
  • resolution：像素密度（如 300dpi），或使用 from-image 关键词来使用图像本身的分辨率。
• 示例：

  img {
    image-resolution: from-image; /* 使用图像本身的分辨率 */
  }
  

  这个例子中，图像将使用其本身的分辨率显示。

25、image-rendering()

• 说明：image-rendering 属性用于优化图像的呈现质量。
• 语法：image-rendering(mode)
• 参数：
  • mode：auto、crisp-edges、pixelated 等。
• 示例：

  img {
    image-rendering: pixelated; /* 保持像素化效果 */
  }
  

  这个例子中，图像将以像素化的方式显示。

26、filter()

• 说明：filter 属性用于应用图像效果。
• 语法：filter(effect)
• 参数：
  • effect: blur(px)：模糊效果。
  • brightness(number)：亮度调整。
  • contrast(number)：对比度调整。
  • grayscale(number)：灰度化效果。
  • hue-rotate(deg)：色调旋转。
  • invert(number)：反相效果。
  • opacity(number)：不透明度。
  • saturate(number)：饱和度调整。
  • sepia(number)：赛普亚效果。
  • drop-shadow(h-shadow v-shadow blur spread color)：投影效果。
• 示例：

  .image {
    filter: blur(5px); /* 应用模糊效果 */
  }
  

  这个例子中，图像将应用模糊效果。

27、drop-shadow()

• 说明：drop-shadow 函数用于模拟元素投影效果。
• 语法：drop-shadow(h-shadow v-shadow blur spread color)
• 参数：
  • h-shadow：水平偏移。
  • v-shadow：垂直偏移。
  • blur：模糊半径。
  • spread：扩展距离。
  • color：颜色。
• 示例：

  .text {
    text-shadow: drop-shadow(2px 2px 2px #000); /* 文字阴影 */
  }
  

  这个例子中，文本将有一个黑色的阴影效果。

六、数据引用函数

28、var()

• 说明：var() 函数用于引用 CSS 自定义属性（变量）。
• 语法：var(name, fallback)
• 参数：
  • name：自定义属性名称。
  • fallback：可选的回退值。
• 示例：

  :root {
    --primary-color: #f00;
  }
  .box {
    color: var(--primary-color); /* 引用自定义颜色变量 */
  }
  

  这个例子中，.box 的颜色为定义在 :root 中的 --primary-color。

29、attr()

• 说明：attr() 函数用于获取元素的属性值。
• 语法：attr(name, fallback)
• 参数：
  • name：属性名称。
  • fallback：可选的回退值。
• 示例：

  img {
    width: attr(data-width); /* 获取 data-width 属性值 */
  }
  

  这个例子中，img 的宽度将根据 data-width 属性的值来确定。

30、env()

• 说明：env() 函数用于访问环境变量。
• 语法：env(name, fallback)
• 参数：
  • name：环境变量名称。
  • fallback：可选的回退值。
• 示例：

  .box {
    width: env(safe-area-inset-right); /* 获取右侧的安全距离 */
  }
  

  这个例子中，.box 的宽度将根据环境变量 safe-area-inset-right 的值来确定。

31、element()

• 说明：element() 函数用于在 CSS 中引用 HTML 元素的内容作为图像源。
• 语法：element(selector)
• 参数：
  • selector：元素的选择器。
• 示例：

  ::before {
    content: element(#logo); /* 引用 id 为 logo 的元素内容 */
  }
  

  这个例子中，伪元素 ::before 的内容将引用 id 为 logo 的元素内容。

32、view()

• 说明：view() 函数用于在 CSS 中引用文档流中的元素。
• 语法：view(selector)
• 参数：
  • selector：元素的选择器。
• 示例：

  ::before {
    content: view(footer); /* 引用 footer 元素的内容 */
  }
  

  这个例子中，伪元素 ::before 的内容将引用 footer 元素的内容。

七、其他函数

33、counter() / counters()

• 说明：counter() 和 counters() 函数用于生成计数器值。
• 语法：counter(name) 或 counters(name, separator)
• 参数：
  • name：计数器名称。
  • separator：可选的分隔符（仅对 counters()）。
• 示例：

  ol {
    counter-reset: item; /* 初始化计数器 */
  }
  li {
    counter-increment: item; /* 每个 li 增加计数器 */
    content: counters(item, ".") " "; /* 显示编号 */
  }
  

  这个例子中，ol 中的每个 li 都会有一个编号。

34、revert()

• 说明：revert 函数用于重置属性值为元素类型的默认值。
• 语法：revert
• 示例：

  p {
    margin: revert; /* 使用默认的段落边距 */
  }
  

  这个例子中，p 的边距将恢复为默认值。

35、initial()

• 说明：initial 函数用于将属性值设置为浏览器默认的初始值。
• 语法：initial
• 示例：

  p {
    margin: initial; /* 使用浏览器默认的段落边距 */
  }
  

  这个例子中，p 的边距将恢复为浏览器的默认值。

36、unset()

• 说明：unset 函数用于移除继承或计算的属性值。
• 语法：unset
• 示例：

  p {
    margin: unset; /* 移除继承的边距 */
  }
  

  这个例子中，p 的边距将不再继承父元素的边距。

37、aspect-ratio()

• 说明：aspect-ratio 属性用于设置元素的宽高比。
• 语法：aspect-ratio(width / height)
• 参数：
  • width / height：宽度与高度的比例。
• 示例：

  video {
    aspect-ratio: 16 / 9; /* 设置视频的宽高比 */
  }
  

  这个例子中，视频的宽高比将为 16:9。

了解有用的 CSS 函数，不仅能提升我们的开发效率，还能让我们的网页设计更加精致和专业。从基本的尺寸计算到复杂的颜色处理，再到动态变换效果，CSS 函数为我们提供了强大的工具，使我们能够快速实现各种设计需求。掌握这些函数不仅可以帮助我们在开发过程中节省时间，还能让我们在面对复杂设计挑战时更加从容。无论是快速调整元素的位置，还是创建绚丽的视觉效果，CSS 都是我们不可或缺的好帮手，让你在未来的项目中更加得心应手。

原文地址