深入了解 CSS 函数：使用方法与实战指南（附函数列表）

        在现代前端开发中，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 函数都能有效提升开发效率和丰富页面效果。

在实际开发中，熟练掌握这些函数并结合响应式设计原则，将让你的项目更具竞争力。快去尝试这些函数，探索更多可能性吧！

原文地址：https://blog.csdn.net/lgf228/article/details/144402102

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！