| 尺寸与计算 |
|---|
| 算术表达式的结果，支持混合单位。 | width: calc(100% - 2rem); |
| 给定值中最小的一个。 | width: min(100%, 60ch); |
| 给定值中最大的一个。 | width: max(320px, 40vw); |
| 被限制在最小值、首选值和最大值之间的值。 | font-size: clamp(1rem, 2vw, 1.5rem); |
| 读取用户代理提供的环境变量。 | padding: env(safe-area-inset-top); |
| 被限制在内容固有宽度内的尺寸。 | width: fit-content(200px); |
| 将一个值舍入到另一个值的最近倍数。 | width: round(up, 133px, 50px); |
| 除法的正余数，永远非负。 | margin: mod(100px, 30px); |
| 除法的余数，保留被除数的符号。 | margin: rem(-100px, 30px); |
| 绝对值。 | translateX(abs(-10px)); |
| 根据值的符号返回 -1、0 或 1。 | padding: sign(-5px) * 10px; |
| 网格 |
|---|
| 用于网格轨道的尺寸范围，介于最小值和最大值之间。 | grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); |
| 将轨道模式重复指定次数，或直到填满为止。 | grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); |
| 逻辑与条件 |
|---|
| 根据条件从两个值中选择一个。 | font-size: if(media(width > 600px), 1.25rem, 1rem); |
| 媒体查询匹配时为真，用于 if() 内部。 | padding: if(media(width > 40rem), 2rem, 1rem); |
| 浏览器支持某个声明时为真，用于 if() 内部。 | display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333); |
| 选择器匹配时为真，用于 if() 内部。 | font-weight: if(selector(:hover), 700, 400); |
| 自定义属性 |
|---|
| 自定义属性的值，可带可选的回退值。 | color: var(--accent, #333); |
| 颜色 |
|---|
| 由红、绿、蓝（以及透明度）通道构成的颜色。 | color: rgb(59 130 246 / 0.8); |
| 由色相、饱和度和明度构成的颜色。 | color: hsl(210 80% 50%); |
| 感知均匀的 OKLCH 色彩空间中的颜色（明度一致）。 | color: oklch(0.7 0.15 250); |
| 在给定色彩空间中混合两种颜色。 | color: color-mix(in srgb, red 40%, blue); |
| 列表中与基准色对比度最高的选项。 | color: color-contrast(#fff vs #000, #777); |
| 由色相、白度和黑度构成的颜色。 | color: hwb(210 10% 20%); |
| CIELAB 色彩空间中的颜色（明度、a 轴、b 轴）。 | color: lab(52% 40 59); |
| CIELAB 色彩空间中的颜色（明度、彩度、色相）。 | color: lch(52% 49 24); |
| 按坐标指定任意预定义色彩空间中的颜色。 | color: color(display-p3 1 0.4 0.2); |
| 浅色方案使用第一个颜色，深色方案使用第二个。 | color: light-dark(#1a1a1a, #f5f5f5); |
| 渐变与图像 |
|---|
| 沿直线在颜色断点之间过渡的渐变。 | background: linear-gradient(90deg, #4b9fff, #2ee6a6); |
| 从一点向外辐射的渐变。 | background: radial-gradient(circle, #fff, #000); |
| 围绕中心点旋转扫过的渐变。 | background: conic-gradient(red, yellow, red); |
| 加载外部资源：图片、字体或 SVG。 | background-image: url(hero.webp); |
| 为设备分辨率挑选最合适的图片。 | background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x); |
| 按给定百分比混合两张图片。 | background-image: cross-fade(30%, url(a.webp), url(b.webp)); |
| 滤镜与形状 |
|---|
| 在 filter 属性中使用的像素滤镜。 | filter: blur(4px) brightness(1.1); |
| 用于绘制裁剪或形状的 SVG 路径字符串。 | clip-path: path('M10 10 H 90 V 90 Z'); |
| 读取 HTML 属性；在 content 之外用途有限。 | content: attr(data-label); |
| 调整元素的对比度。 | filter: contrast(1.4); |
| 绘制跟随元素 alpha 形状的阴影。 | filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3)); |
| 将元素转换为灰度。 | filter: grayscale(100%); |
| 反转元素的颜色。 | filter: invert(1); |
| 应用深褐色调。 | filter: sepia(0.6); |
| 旋转元素颜色的色相。 | filter: hue-rotate(90deg); |
| 通过 filter 设置元素的不透明度。 | filter: opacity(0.5); |
| 用于 clip-path 或 shape-outside 的圆形。 | clip-path: circle(40% at 50% 50%); |
| 用于 clip-path 或 shape-outside 的椭圆形。 | clip-path: ellipse(50% 35% at 50% 50%); |
| 用于 clip-path 的圆角矩形。 | clip-path: inset(10px 10px 10px 10px round 8px); |
| 由点列表构成的多边形。 | clip-path: polygon(50% 0, 100% 100%, 0 100%); |
| 变换 |
|---|
| 沿 X 轴和 Y 轴移动元素。 | transform: translate(10px, 20px); |
| 围绕元素中心旋转。 | transform: rotate(45deg); |
| 沿 X 轴和 Y 轴缩放元素。 | transform: scale(1.25); |
| 沿 X 轴和 Y 轴倾斜元素。 | transform: skew(10deg, 0deg); |
| 由六个矩阵值构成的 2D 变换。 | transform: matrix(1, 0, 0.5, 1, 10, 0); |
| 为元素的子元素设置 3D 透视深度。 | transform: perspective(600px) rotateY(20deg); |
| 动画与计数器 |
|---|
| 由四个控制点构成的缓动曲线。 | transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); |
| 以相等步长跳变的缓动。 | animation-timing-function: steps(8, end); |
| CSS 计数器的当前值，用作 content。 | content: counter(chapter); |
| 计数器及其所有祖先计数器的值，以字符串连接。 | content: counters(item, "."); |
| 随着值在起点和终点之间推进，从 0 变到 1。 | opacity: progress(scroll(), 0, 50vh); |
| 某个范围内的随机数，每个元素固定不变。 | rotate: random(from -5deg to 5deg); |
| 角度的正弦，用于 calc 表达式。 | translateY(calc(1rem * sin(45deg))); |
| 角度的余弦，用于 calc 表达式。 | translateX(calc(1rem * cos(45deg))); |