css3 新增属性/滤镜效果/裁剪元素/图片适应盒子/定义和使用变量/恢复默认initial

从 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 的全局属性，可以一次性移除所有样式（继承和非继承的都清空），非常适合“清空”样式再重新设计。