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

从 CSS3 发布至今，CSS 标准引入了大量新特性，极大地丰富了前端开发的能力。以下是 CSS3 之后的重要新增属性、模块与特性总结，涵盖布局、动画、交互、视觉、选择器、单位等多个领域。

🎨 视觉与效果增强

📐 新布局模块

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;

尺寸控制

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;
}

让浏览器提前知道尺寸，有利于提升渲染性能。

总结

🧮 新单位

🖋️ 字体与文本

🎬 动画与交互

🎨 新颜色功能

🧩 新选择器

🧭 定位与滚动

🎛️ 其他新特性

什么是 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); /* 提供默认值 */
}

总结

其他

width: fit-content 的含义

• 元素的宽度会根据内容的宽度自动调整，但同时会受到 min-width 和 max-width 的限制。
• 它的行为类似于说：“这个盒子刚好包住里面的内容，不多也不少。”

样式恢复默认initial

1️⃣ 通过覆盖样式“删除”

• 原样式

..box {
  color: red;
  background-color: yellow;
}

覆盖掉
.box {
  color: initial;             /* 恢复默认 */
  background-color: transparent; /* 清空背景 */
}
或者完全覆盖：

.box {
  all: unset;
}

3️⃣ 彻底移除样式（通过覆盖 all）

.box {
  all: unset;
}

• all 是 CSS 的全局属性，可以一次性移除所有样式（继承和非继承的都清空），非常适合“清空”样式再重新设计。