一、颜色函数

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() 适配高分辨率屏幕。

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

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

CSS中常用到的函数属性笔记（css的各种属性）

一、颜色函数

1. rgb()/ rgba()

2. hsl()/ hsla()

3. 现代颜色函数（CSS Color Level 4+）

二、渐变函数

1. linear-gradient()

2. radial-gradient()

3. conic-gradient()

三、布局与计算函数

1. calc()

2. min(), max(), clamp()

3. minmax()（Grid 布局）

四、变形与动画函数

1. transform函数

2. cubic-bezier()（动画时间函数）

3. steps()（逐帧动画）

五、滤镜函数（filter属性）

1. blur()

2. drop-shadow()

3. 颜色调整滤镜

六、其他核心函数

1. var()（CSS 变量）

2. attr()（属性值引用）

3. url()（资源引用）

七、高级函数（实验性/未来特性）

1. 三角函数（CSS Values Level 4）

2. math()函数

最佳实践与注意事项