CSS 提供了丰富的内置函数来实现各种样式效果，以下是分类整理的 CSS 函数列表及其应用场景：
一、布局与尺寸函数
| 函数 |
作用 |
示例 |
calc() |
动态计算值 |
width: calc(100% - 40px) |
min() |
取最小值 |
font-size: min(2vw, 24px) |
max() |
取最大值 |
padding: max(10px, 2%) |
clamp() |
区间限制值 |
font-size: clamp(1rem, 2vw, 1.5rem) |
fit-content() |
根据内容调整尺寸 |
width: fit-content(300px) |
二、颜色函数
基础颜色
| 函数 |
颜色模型 |
示例 |
rgb() |
RGB（红绿蓝） |
rgb(255 0 0 / 0.5) |
hsl() |
HSL（色相饱和度亮度） |
hsl(120deg 100% 50%) |
hwb() |
HWB（色相白度黑度） |
hwb(180deg 20% 10%) |
高级颜色操作
| 函数 |
作用 |
示例 |
color-mix() |
混合颜色 |
color-mix(in srgb, red 30%, blue 70%) |
color-contrast() |
选择对比度最高的颜色 |
color: color-contrast(white vs red, blue, green) |
三、渐变函数
| 函数 |
类型 |
示例 |
linear-gradient() |
线性渐变 |
background: linear-gradient(90deg, red, blue) |
radial-gradient() |
径向渐变 |
background: radial-gradient(circle, red, yellow) |
conic-gradient() |
锥形渐变 |
background: conic-gradient(red, yellow, green) |
四、变形与动画函数
2D/3D变换
| 函数 |
作用 |
示例 |
rotate() |
旋转 |
transform: rotate(45deg) |
scale() |
缩放 |
transform: scale(1.2) |
translate() |
位移 |
transform: translate(10px, 20px) |
perspective() |
3D透视距离 |
transform: perspective(500px) rotateY(30deg) |
动画曲线
| 函数 |
作用 |
示例 |
cubic-bezier() |
自定义贝塞尔曲线 |
transition: all 0.3s cubic-bezier(0.17, 0.67, 0.83, 0.67) |
steps() |
步进动画 |
animation-timing-function: steps(4) |
五、滤镜效果函数
| 函数 |
作用 |
示例 |
blur() |
高斯模糊 |
filter: blur(5px) |
drop-shadow() |
投影效果 |
filter: drop-shadow(2px 2px 5px black) |
brightness() |
亮度调整 |
filter: brightness(1.2) |
六、形状与裁剪函数
| 函数 |
作用 |
示例 |
circle() |
圆形裁剪 |
clip-path: circle(50% at center) |
polygon() |
多边形裁剪 |
clip-path: polygon(0 0, 100% 0, 50% 100%) |
path() |
SVG路径裁剪 |
clip-path: path('M10 10 H 90 V 90 H 10 Z') |
七、其他实用函数
| 函数 |
作用 |
示例 |
var() |
引用CSS变量 |
color: var(--primary-color) |
url() |
引用资源路径 |
background-image: url("img.png") |
attr() |
获取HTML属性值 |
content: attr(data-title) |
counter() |
计数器值引用 |
content: counter(section) |
使用建议
浏览器兼容性：新函数（如 color-mix()）需检查兼容性
性能优化：
回退方案：
.box {
width: 300px; /* 回退值 */
width: clamp(200px, 50vw, 300px);
}
掌握这些函数能显著提升开发效率，建议在项目中逐步实践应用。