从 CSS3 发布至今，CSS 标准引入了大量新特性，极大地丰富了前端开发的能力。以下是 CSS3 之后的重要新增属性、模块与特性总结，涵盖布局、动画、交互、视觉、选择器、单位等多个领域。
🎨 视觉与效果增强
| 属性/功能 | 作用 | 示例 |
|---|
filter | 滤镜效果（模糊、灰度等） | filter: blur(5px) grayscale(50%); |
backdrop-filter | 背景模糊、滤镜（玻璃拟态） | backdrop-filter: blur(10px); |
mix-blend-mode | 图层混合模式 | mix-blend-mode: multiply; |
mask / mask-image | 蒙版裁剪元素形状 | mask-image: url(mask.svg); |
clip-path | 裁剪元素形状 | clip-path: circle(50% at center); |
object-fit | 图片适应盒子 | object-fit: cover; |
object-position | 图片位置 | object-position: center; |
📐 新布局模块
1️⃣ 弹性盒子（Flexbox）
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
2️⃣ 网格布局（Grid Layout）
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto;
gap: 10px;
尺寸控制
| 属性 | 作用 | 示例 |
|---|
min-content | 内容最小宽度 | width: min-content; |
max-content | 内容最大宽度 | width: max-content; |
fit-content() | 内容适配宽度 | width: fit-content(300px); |
aspect-ratio | 固定宽高比 | aspect-ratio: 16 / 9; |
1️⃣ min-content & max-content
<div class="box">一段很长很长的文字，不想换行。</div>
.box {width: min-content;background: lightblue;border: 1px solid #333;
}
- min-content：元素的最小尺寸（不换行情况下内容的最小宽度）。
- max-content：元素的最大尺寸（内容完全展开的宽度）。
对比示例
<div class="box1">一段很长很长的文字，不想换行。</div>
<div class="box2">一段很长很长的文字，不想换行。</div>
.box1 {width: min-content;
}.box2 {width: max-content;
}
- min-content 会尽可能缩小。
- max-content 会完全展开内容宽度
2️⃣ fit-content()
width: fit-content(<length>);
.card {width: fit-content(300px);background: lightgreen;padding: 10px;
}
3️⃣ aspect-ratio
<div class="video-box"></div>
.video-box {width: 300px;aspect-ratio: 16 / 9;background: #ccc;
}
- 宽度固定 300px，高度会自动按比例计算为 300 / 16 * 9 = 168.75px。
响应式示例
.video-box {width: 100%;max-width: 600px;aspect-ratio: 16 / 9;
}
- 这样可以自适应宽度，保持比例不变，非常适合视频、图片容器。
intrinsic-size（实验性 用于设置内容的本体尺寸，影响容器查询和布局。
.box {width: 100cqi;height: 100cqi;intrinsic-size: 300px 200px;
}
目前支持度较低，主要用于布局优化。
5️⃣ contain-intrinsic-size（实验性）
为 contain 元素设置默认尺寸，用于性能优化（避免布局抖动）。
.lazy-box {contain: layout;contain-intrinsic-size: 300px 200px;
}
让浏览器提前知道尺寸，有利于提升渲染性能。
总结
| 功能 | 用途示例 | 场景 |
|---|
min-content | 最小宽度内容撑开 | 表格列、按钮、标签 |
max-content | 最大内容宽度 | 自适应文本块 |
fit-content() | 灵活自适应+限制最大宽度 | 卡片、弹窗、菜单 |
aspect-ratio | 固定比例容器 | 视频、图片、轮播、响应式盒子 |
contain-intrinsic-size | 性能优化 | 懒加载内容、虚拟滚动容器 |
🧮 新单位
| 单位 | 含义 | 示例 |
|---|
vh/vw | 视口宽高百分比（1%） | width: 50vw; |
vmin/vmax | 视口最小/最大边 | font-size: 3vmin; |
fr | Grid 中的分数单位 | grid-template-columns: 1fr 2fr; |
ch | 字符宽度单位（数字 0 的宽度） | width: 30ch; |
ex | x 高度单位（小写 x 的高度） | line-height: 2ex; |
🖋️ 字体与文本
| 属性/功能 | 作用 | 示例 |
|---|
@font-face | 自定义字体 | @font-face { font-family: xxx; } |
font-variation-settings | 可变字体属性调整 | font-variation-settings: "wght" 700; |
hyphens | 自动断词 | hyphens: auto; |
🎬 动画与交互
| 属性/功能 | 作用 | 示例 |
|---|
@keyframes / animation | 关键帧动画 | animation: fadeIn 1s ease; |
transition | 过渡动画 | transition: all 0.3s ease; |
will-change | 提前优化性能提示 | will-change: transform; |
scroll-behavior | 平滑滚动 | scroll-behavior: smooth; |
scroll-snap-type | 滚动吸附 | scroll-snap-type: x mandatory; |
🎨 新颜色功能
| 属性/函数 | 作用 | 示例 |
|---|
rgba() / hsla() | 透明度/色相饱和度亮度模式 | background: rgba(255,0,0,0.5); |
hwb() | 色相白度黑度 | color: hwb(120 0% 0%); |
color-mix() | 颜色混合 | color: color-mix(in srgb, red 30%, blue); |
color() | 高级颜色管理（P3色域等） | color: color(display-p3 1 0 0); |
🧩 新选择器
| 选择器 | 作用 | 示例 |
|---|
:not() | 排除某个选择器 | div:not(.active) |
:is() | 简化多个选择器 | :is(h1, h2, h3) {} |
:where() | 不增加权重的 is() | :where(section, article) {} |
:has() | 父选择器（条件选择器） | div:has(img) |
🧭 定位与滚动
| 属性 | 作用 | 示例 |
|---|
position: sticky | 粘性定位 | position: sticky; top: 0; |
anchor-position | 锚点定位（新特性） | position-anchor: --marker; |
container-type | 容器查询布局（新特性） | container-type: inline-size; |
🎛️ 其他新特性
| 特性/模块 | 作用 | 示例 |
|---|
| CSS 变量 (Custom Properties) | 定义和使用变量 | --main-color: red; color: var(--main-color); |
calc() | 动态计算 | width: calc(100% - 50px); |
| CSS Nesting | CSS 原生嵌套 | div { &.active { color: red; } } |
| CSS Houdini | CSS 低级 API（扩展 CSS 功能） | CSS.paintWorklet.addModule('...'); |
什么是 CSS 变量？
- CSS 变量（Custom Properties） 是一种可以在 CSS 中定义、复用、动态调整的值
- 通常我们会在 :root 选择器中定义全局变量：
:root {--main-color: #4CAF50;--secondary-color: #FF5722;--font-size: 16px;
}
在局部定义（作用域内定义）
你也可以在某个选择器内定义，只在该选择器及其子元素生效
.button {--btn-color: blue;
}.button {background-color: var(--btn-color);
}
h1 {color: var(--main-color);font-size: var(--font-size);
}.button {background-color: var(--btn-color, green); /* 提供默认值 */
}
总结
| 功能 | 语法 | 示例 |
|---|
| 定义变量 | --变量名: 值; | --main-color: red; |
| 使用变量 | var(--变量名) | color: var(--main-color); |
| 默认值 | var(--变量名, 默认值) | color: var(--unknown, black); |
| 局部变量 | 在某个选择器下定义 | .btn { --btn-color: blue; } |
| 全局变量 | 在 :root 中定义 | :root { --font-size: 16px; } |
| 结合 JS 使用 | element.style.setProperty('--var', value) | document.documentElement.style.setProperty('--main-color', '#333'); |
其他
width: fit-content 的含义
- 元素的宽度会根据内容的宽度自动调整，但同时会受到 min-width 和 max-width 的限制。
- 它的行为类似于说：“这个盒子刚好包住里面的内容，不多也不少。”
| 属性 | 含义 | 使用场景 |
|---|
width: fit-content | 宽度刚好适应内容，按需调整 | 适合小块内容（如标签、按钮），不适合表格大布局 |
width: 100% | 撑满父容器 | 适合全屏布局、容器布局 |
min-width | 设置最小宽度 | 适合防止过小的内容收缩 |
max-width | 设置最大宽度 | 适合防止内容过大撑破布局 |
样式恢复默认initial
| 关键字 | 作用 | 示例 |
|---|
unset | 恢复到继承的状态（如果可继承），否则恢复初始 | color: unset; |
initial | 恢复到浏览器默认值（规范的初始值） | margin: initial; |
inherit | 强制继承父元素 | font-size: inherit; |
1️⃣ 通过覆盖样式“删除”
..box {color: red;background-color: yellow;
}覆盖掉
.box {color: initial; /* 恢复默认 */background-color: transparent; /* 清空背景 */
}
或者完全覆盖：.box {all: unset;
}
3️⃣ 彻底移除样式（通过覆盖 all）
.box {all: unset;
}
- all 是 CSS 的全局属性，可以一次性移除所有样式（继承和非继承的都清空），非常适合“清空”样式再重新设计。
