在现代前端开发中，CSS 函数为我们带来了大量便利，能够在样式中直接进行计算、动态呈现内容或增强页面视觉效果。本文将系统介绍 CSS 中常见的函数类型、用法和实际应用场景，帮助你在开发中更加高效地使用这些工具。
什么是 CSS 函数？
CSS 函数是一种 CSS 的内建机制，用于接收参数并动态生成结果，例如颜色、尺寸、位置等。它们可以解决许多以前需要借助 JavaScript 才能实现的效果，使样式表更为灵活且功能强大。
CSS 值函数汇总表
| 函数类别 | 函数名称 | 描述 |
|---|---|---|
| 变换函数 | translateX() |
水平移动一个元素 |
translateY() |
垂直移动一个元素 | |
translateZ() |
沿 Z 轴方向移动一个元素 | |
translate() |
在 2D 平面上移动一个元素 | |
translate3d() |
在 3D 空间中移动一个元素 | |
rotateX() |
沿水平轴旋转元素 | |
rotateY() |
沿垂直轴旋转元素 | |
rotateZ() |
沿 Z 轴旋转元素 | |
rotate() |
围绕 2D 平面的一个定点旋转一个元素 | |
rotate3d() |
围绕 3D 平面的一个定轴旋转一个元素 | |
scaleX() |
沿水平方向缩放元素 | |
scaleY() |
沿垂直方向缩放元素 | |
scaleZ() |
沿 Z 轴方向缩放元素 | |
scale() |
在 2D 平面上缩放元素 | |
scale3d() |
在 3D 空间中缩放元素 | |
skewX() |
沿水平方向倾斜元素 | |
skewY() |
沿竖直方向倾斜元素 | |
skew() |
在 2D 平面上倾斜元素 | |
matrix() |
描述一个齐次的二维变换矩阵 | |
matrix3d() |
描述一个三维变换的 4x4 齐次矩阵 | |
perspective() |
设置用户与平面 Z=0 之间的距离 | |
| 数学函数 | calc() |
执行基本的算术计算 |
min() |
计算一系列值的最小值 | |
max() |
计算一系列值的最大值 | |
clamp() |
计算最小值、中间值、最大值的中值 | |
round() |
根据舍入策略计算一个舍入的数字 | |
mod() |
计算一个数除以另一个数的模 | |
rem() |
计算一个数字除以另一个数字的余数 | |
sin() |
计算一个数的三角正弦值 | |
cos() |
计算一个数的三角余弦值 | |
tan() |
计算一个数的三角正切值 | |
asin() |
计算一个数的三角反正弦值 | |
acos() |
计算一个数的三角反余弦值 | |
atan() |
计算一个数的三角反正切值 | |
atan2() |
计算平面内两个数字的三角反正切值 | |
pow() |
计算基数的幂次方值 | |
sqrt() |
计算一个数的平方根 | |
hypot() |
计算其参数的平方和的平方根 | |
log() |
计算一个数的对数值 | |
exp() |
计算一个数的 e 次方值 | |
abs() |
计算一个数的绝对值 | |
sign() |
计算一个数的符号值（正值或负值） | |
| 过滤器函数 | blur() |
增加图像的高斯模糊度 |
brightness() |
增加或减少图像的亮度 | |
contrast() |
增加或减少图像的对比度 | |
drop-shadow() |
在图像背后应用阴影 | |
grayscale() |
转换图像为灰度图 | |
hue-rotate() |
改变图像的整体色调 | |
invert() |
反转图像的颜色 | |
opacity() |
增加图像的透明度 | |
saturate() |
改变图像的整体饱和度 | |
sepia() |
增加图像偏棕褐色的程度 | |
| 颜色值函数 | rgb() |
根据红、绿、蓝和 alpha（透明度）成分定义颜色 |
hsl() |
根据色调、饱和度、亮度和 alpha（透明度）成分定义颜色 | |
hwb() |
根据色调、白度和黑度成分定义颜色 | |
lch() |
根据亮度、色度和色调成分定义颜色 | |
oklch() |
根据亮度、色度、色调和 alpha（透明度）成分定义颜色 | |
lab() |
根据实验室色彩空间中的亮度、a 轴距离和 b 轴距离定义颜色 | |
oklab() |
根据实验室色彩空间中的亮度、a 轴距离、b 轴距离和 alpha 定义颜色 | |
color() |
指定特定的色彩空间 | |
color-mix() |
在给定的色彩空间中混合两个颜色值 | |
device-cmyk() |
以设备无关的方式定义 CMYK 颜色 | |
| 图像函数 | linear-gradient() |
线性渐变沿着一条假想线逐渐过渡颜色 |
radial-gradient() |
径向渐变从一个中心点逐步过渡颜色 | |
conic-gradient() |
锥形渐变在一个圆周上逐步过渡颜色 | |
repeating-linear-gradient() |
无限重复使用线性渐变 | |
repeating-radial-gradient() |
无限重复使用径向渐变 | |
image() |
定义一个图像，增加了方向性和后备图像的功能 | |
image-set() |
从一组给定的 CSS 图片中挑选最合适的图片 | |
cross-fade() |
以定义的透明度混合两个或多个图像 | |
| 计数器函数 | counter() |
返回指定计数器当前值的字符串 |
counters() |
启用嵌套的计数器，返回拼接字符串 | |
symbols() |
定义内联的计数器样式 | |
| 形状函数 | circle() |
定义一个圆形 |
ellipse() |
定义一个椭圆形 | |
inset() |
定义一个嵌入矩形 | |
polygon() |
定义一个多边形 | |
path() |
接受 SVG 路径字符串以绘制形状 | |
| 引用函数 | attr() |
使用定义在 HTML 元素上的属性值 |
env() |
使用用户代理定义的环境变量 | |
var() |
使用自定义属性值 | |
| 网格函数 | fit-content() |
根据公式将尺寸固定在可用尺寸范围中 |
minmax() |
定义一个尺寸范围 | |
repeat() |
代表轨道列表的一个重复片段 | |
| 字体函数 | stylistic() |
启用单个字符的风格替代 |
styleset() |
启用字符集的风格选择 | |
character-variant() |
为字符启用特定的风格选择 | |
swash() |
启用 swash 字形 | |
ornaments() |
启用装饰物 | |
annotation() |
启用注解 | |
| 缓动函数 | cubic-bezier() |
定义三次贝塞尔曲线的缓动函数 |
steps() |
在过渡中迭代若干次定格 | |
| 动画函数 | scroll() |
设置元素的动画时间线 |
详细用法参照CSS 值函数 - CSS：层叠样式表 | MDN (mozilla.org)
分类与使用方法
让我们从最常见的几类 CSS 函数入手，逐一了解它们的使用方法和示例。
1. 颜色函数
颜色函数允许通过指定参数生成颜色，尤其是在自定义动态颜色时非常有用。
常用函数
rgb()和rgba()
用于定义红、绿、蓝三基色颜色，rgba则包含透明度（alpha）。color: rgb(255, 0, 0); /* 红色 */ color: rgba(255, 0, 0, 0.5); /* 半透明红色 */hsl()和hsla()
用色相（hue）、饱和度（saturation）、亮度（lightness）来定义颜色，并允许设置透明度。color: hsl(120, 100%, 50%); /* 绿色 */ color: hsla(120, 100%, 50%, 0.8); /* 半透明绿色 */
使用场景
- 动态改变颜色主题；
- 创建透明效果；
- 使用亮度调整生成更符合设计需求的颜色。
2. 尺寸计算函数
尺寸函数能够帮助我们在样式中实现动态尺寸的计算和限制，特别适合响应式设计。
常用函数
calc()
用于在 CSS 中进行动态数学计算。width: calc(100% - 50px); /* 总宽度减去 50 像素 */clamp()
限制一个值在最小值、理想值和最大值之间。font-size: clamp(1rem, 2vw, 3rem); /* 字号随着屏幕宽度变化，但限制在 1rem 到 3rem 之间 */min()和max()
返回多个值中的最小值或最大值。width: min(50%, 300px); /* 选择 50% 或 300px 中的最小值 */
使用场景
- 根据页面宽度动态调整组件大小；
- 平衡字体大小和布局大小；
- 创建适配多设备的响应式布局。
3. 几何变换函数
CSS 几何函数经常用在 transform 属性中，用于实现元素的旋转、缩放、移动等效果。
常用函数
translate()移动元素。transform: translate(20px, 30px); /* 水平移动 20px，垂直移动 30px */rotate()旋转元素。transform: rotate(45deg); /* 按 45 度顺时针旋转 */scale()缩放元素。transform: scale(1.5, 2); /* 水平方向放大 1.5 倍，垂直方向放大 2 倍 */
使用场景
- 创建动画效果；
- 实现交互式用户界面；
- 完成 2D 或 3D 变换。
4. 变量和属性函数
大项目开发中，CSS 变量和属性值是提高可维护性和灵活性的重要工具。
常用函数
var()使用 CSS 自定义属性（变量）。:root { --main-color: #3498db; } body { color: var(--main-color); /* 应用变量值 */ }attr()用于获取 HTML 属性的值（通常结合伪元素使用）。<div class="item" data-info="这是一个项目"></div> <style> .item::after { content: " - " attr(data-info); } </style>
使用场景
- 中央集中管理样式变量；
- 动态显示 HTML 元素的属性信息。
5. 背景和渐变函数
CSS 的渐变函数常用于生成背景效果，而不需要引入额外的图片。
常用函数
linear-gradient()创建线性渐变背景。background: linear-gradient(to right, red, blue);radial-gradient()创建放射状渐变背景。background: radial-gradient(circle, red, blue);
使用场景
- 无缝的背景效果；
- 替代静态图片以提升性能；
- 增加页面视觉美感。
6. 滤镜函数
CSS 滤镜函数允许直接对元素应用效果，比如模糊、亮度等。
常用函数
blur()应用模糊效果。filter: blur(5px); /* 模糊程度为 5 像素 */brightness()调整元素的亮度。filter: brightness(0.8); /* 将亮度减少到 80% */grayscale()转换为灰度。filter: grayscale(100%); /* 完全灰度化 */
使用场景
- 图片处理；
- 动画效果；
- 与 JavaScript 交互时的视觉表现。
总结
CSS 函数为开发者提供了灵活、强大的工具，用于创建动态样式和提高页面表现力。无论是颜色的定义、尺寸的动态计算、还是动画和渐变效果，CSS 函数都能有效提升开发效率和丰富页面效果。
在实际开发中，熟练掌握这些函数并结合响应式设计原则，将让你的项目更具竞争力。快去尝试这些函数，探索更多可能性吧！