从 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;
} -
内容会根据实际大小撑开，但不会超过 300px。
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 的全局属性，可以一次性移除所有样式（继承和非继承的都清空），非常适合"清空"样式再重新设计。