一、颜色函数

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：

<div data-tooltip="提示内容">Hover me</div>div::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(表达式)
• 支持更复杂的数学运算（需浏览器支持）。

最佳实践与注意事项

0. 浏览器兼容性：
1. 使用 Can I Use 检查支持情况。
2. 对实验性功能（如 color-mod()）提供备用方案。
3. 性能优化：
4. 避免过度使用 calc() 嵌套或复杂滤镜。
5. 渐变和阴影在大量使用时可能影响渲染性能。
6. 响应式设计：
7. 结合 clamp() 和 min()/max() 实现动态布局。
8. 使用 image-set() 适配高分辨率屏幕。

通过深入理解这些函数，可以更高效地实现复杂布局、动画和视觉效果，同时保持代码简洁和可维护性。