一、颜色函数
1. rgb()/ rgba()
- 语法：rgb(red, green, blue) 或 rgba(red, green, blue, alpha)
- red, green, blue: 0-255 的整数或 0%-100% 的百分比。
- alpha: 0（透明）到 1（不透明）的小数。
- 示例：
color: rgb(255 0 0); /* 红色（CSS4+ 空格分隔语法） */
background: rgba(0 255 0 / 0.5); /* 半透明绿色（CSS4+ 简写） */- 注意：
- CSS4 支持省略逗号（用空格分隔），并支持 rgba() 简写为 / 语法（如 rgb(0 255 0 / 50%)）。
2. hsl()/ hsla()
- 语法：hsl(hue, saturation%, lightness%) 或 hsla(hue, saturation%, lightness%, alpha)
- hue: 0-360 的色相角度（0=红，120=绿，240=蓝）。
- saturation%: 0%（灰）到 100%（鲜艳）。
- lightness%: 0%（黑）到 100%（白）。
- 示例：
background: hsl(270 80% 50% / 0.8); /* 紫色带透明度 */- 应用场景：更直观地调整颜色（如动态主题色）。
3. 现代颜色函数（CSS Color Level 4+）
- lab()：基于人类视觉的均匀颜色空间（Lightness, a轴, b轴）。
- lch()：类似 lab()，但用色度（Chroma）和色相角（Hue）。
- oklab() / oklch()：优化后的颜色空间，更符合人眼感知。
- 示例：
color: oklch(70% 0.3 270); /* 亮蓝色 */- 注意：部分浏览器需开启实验性支持（如 Safari）。
二、渐变函数
1. linear-gradient()
- 语法：linear-gradient([角度或方向], color-stop1, color-stop2, ...)
- 方向：to top、45deg（默认 to bottom）。
- 颜色停靠点：yellow 20%（颜色 + 位置）。
- 示例：
background: linear-gradient(
to right,
red 0%,
orange 50%,
yellow 100%
); /* 水平渐变 */- 技巧：用透明色创建叠加效果：
background: linear-gradient(rgba(0,0,0,0.5), transparent);2. radial-gradient()
- 语法：radial-gradient([形状] [at 位置], color-stop1, color-stop2, ...)
- 形状：circle 或 ellipse（默认）。
- 位置：at center（默认）、at top left。
- 示例：
background: radial-gradient(
circle at 20% 80%,
#ff0000,
#0000ff
); /* 从左上角扩散的圆形渐变 */3. conic-gradient()
- 语法：conic-gradient([起点角度 at 中心], color-stop1, color-stop2, ...)
- 起点角度：默认从 12 点方向开始。
- 示例（饼图）：
background: conic-gradient(
red 0deg 90deg,
green 90deg 180deg,
blue 180deg
);三、布局与计算函数
1. calc()
- 语法：calc(数学表达式)
- 支持 +, -, *, /，注意乘除需有单位类型一致（如 100% - 20px 有效）。
- 示例：
.container {
width: calc(100vw - 40px); /* 视口宽度减去边距 */
gap: calc(1rem * 0.5); /* 0.5rem 间距 */
}- 注意：避免复杂嵌套（可能影响性能）。
2. min(), max(), clamp()
- 语法：
- min(value1, value2, ...)：取最小值。
- max(value1, value2, ...)：取最大值。
- clamp(min, ideal, max)：限制在 min 和 max 之间。
- 示例：
.responsive-box {
width: min(90%, 1200px); /* 最大不超过 1200px */
font-size: clamp(16px, 3vw, 24px); /* 动态字体大小 */
}3. minmax()（Grid 布局）
- 语法：minmax(min-size, max-size)
- 用于定义网格轨道的尺寸范围。
- 示例：
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 自适应列，最小 200px，最大等分剩余空间 */四、变形与动画函数
1. transform函数
- 常用函数：
- translate(x, y)：位移（支持 translateX(), translateY()）。
- rotate(angle)：旋转（deg, rad, turn）。
- scale(x, y)：缩放（无单位数值）。
- skew(x-angle, y-angle)：倾斜。
- 组合使用：
.box {
transform: translate(50%, -50%) rotate(45deg) scale(1.2);
}2. cubic-bezier()（动画时间函数）
- 语法：cubic-bezier(x1, y1, x2, y2)
- 定义动画速度曲线，默认值 ease = cubic-bezier(0.25, 0.1, 0.25, 1)。
- 工具：通过 cubic-bezier.com 调试曲线。
- 示例：
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);3. steps()（逐帧动画）
- 语法：steps(n, jump-term)
- n：分割的帧数。
- jump-term：jump-start（立即跳转）、jump-end（结束跳转）。
- 示例：
animation: walk 1s steps(8) infinite;
/* 将动画分为 8 帧播放 */五、滤镜函数（filter属性）
1. blur()
- 语法：blur(radius)
- radius：模糊半径（如 5px）。
- 示例：
.blurred {
filter: blur(2px);
}2. drop-shadow()
- 语法：drop-shadow(offset-x offset-y blur-radius color)
- 更智能的投影（支持透明区域）。
- 对比 box-shadow：box-shadow 作用于盒子，drop-shadow 作用于内容轮廓。
- 示例：
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));3. 颜色调整滤镜
- 函数：
- brightness(%)：亮度（>100% 更亮）。
- contrast(%)：对比度。
- grayscale(%)：灰度化。
- hue-rotate(deg)：色相旋转。
- 组合使用：
filter: brightness(80%) contrast(120%) grayscale(20%);六、其他核心函数
1. var()（CSS 变量）
- 语法：var(--variable-name, fallback-value)
- 变量需定义在 :root 或元素上：
:root {
--primary-color: #ff4757;
}
.text {
color: var(--primary-color, red); /* 后备值为 red */
}2. attr()（属性值引用）
- 语法：attr(data-attribute)
- 常用于伪元素的 content：
Hover mediv::after {
content: attr(data-tooltip);
}3. url()（资源引用）
- 语法：url(path/to/resource)
- 支持相对路径、绝对路径或 Base64：
background-image: url("data:image/png;base64,iVBOR...");七、高级函数（实验性/未来特性）
1. 三角函数（CSS Values Level 4）
- 函数：sin(), cos(), tan(), asin(), acos(), atan(), atan2()
- 示例：
.wave {
transform: translateY(calc(sin(0.25turn) * 100px));
}2. math()函数
- 语法：math(表达式)
- 支持更复杂的数学运算（需浏览器支持）。
最佳实践与注意事项
- 浏览器兼容性：
- 使用 Can I Use 检查支持情况。
- 对实验性功能（如 color-mod()）提供备用方案。
- 性能优化：
- 避免过度使用 calc() 嵌套或复杂滤镜。
- 渐变和阴影在大量使用时可能影响渲染性能。
- 响应式设计：
- 结合 clamp() 和 min()/max() 实现动态布局。
- 使用 image-set() 适配高分辨率屏幕。
通过深入理解这些函数，可以更高效地实现复杂布局、动画和视觉效果，同时保持代码简洁和可维护性。