CSS3 新特性

知识点四：CSS3 新增知识点详细补充

CSS3 不是单一规范，而是模块化升级，以下按功能模块详细展开。
注意标注浏览器兼容性要求（如前缀、版本）及最佳实践。

1. 新增选择器

1.1 属性选择器增强

选择器	含义	示例
`[attr^="value"]`	属性值以 value 开头	`a[href^="https"]`
`[attr$="value"]`	属性值以 value 结尾	`img[src$=".png"]`
`[attr*="value"]`	属性值包含 value	`[class*="btn"]`
`[attr~="value"]`	属性值为空格分隔列表，其中包含 value（与 CSS2 相同但加强）	-
`[attr\|="value"]`	属性值以 value 开头且后跟连字符（用于语言代码）	-

1.2 结构伪类

:root：根元素，等同 html，但优先级更高。
:empty：没有子节点（包括文本节点）的元素。
:nth-child(n)：父元素的第 n 个子元素，n 可为数字、关键字（odd/even）或公式 an+b。
:nth-last-child(n)：从末尾计数。
:nth-of-type(n)：父元素中同类型的第 n 个。
:nth-last-of-type(n)：从末尾计数同类型。
:first-child、:last-child、:first-of-type、:last-of-type（部分 CSS2 已有，但正式纳入 CSS3）。
:only-child：父元素唯一的子元素。
:only-of-type：父元素中唯一该类型的子元素。

1.3 否定伪类

:not(selector)：排除匹配 selector 的元素。selector 可以是简单选择器，CSS3 不支持复杂选择器（CSS4 放宽）。

1.4 目标伪类

:target：匹配当前 URL 片段标识符（#id）指向的元素，常用于单页锚点高亮。

1.5 UI 状态伪类

:enabled、:disabled：启用/禁用的表单控件。
:checked：被选中的 radio/checkbox/option。
:indeterminate：不确定状态的复选框（如半选）。
:required、:optional：必填/非必填字段。
:valid、:invalid：根据表单验证规则（如 pattern、required、type=email）判断。
:in-range、:out-of-range：数值超出 min/max 范围。
:read-only、:read-write：读写状态。

1.6 伪元素双冒号规范

CSS3 规定伪元素使用双冒号 :: 以区分伪类，但为兼容旧浏览器，单冒号也支持。
包括：::before、::after、::first-line、::first-letter、::selection（文本选中样式，仅支持部分属性如 color、background）。

2. 圆角、阴影与边框背景增强

2.1 `border-radius`

1 个值：所有角相同。
2 个值：左上/右下、右上/左下。
3 个值：左上、右上/左下、右下。
4 个值：左上、右上、右下、左下。
也可 / 分隔水平/垂直半径，实现椭圆角：border-radius: 20px / 10px;。
支持百分比（相对于边框盒宽高）。

2.2 `box-shadow`

语法：box-shadow: none | [inset? h-offset v-offset blur-radius spread-radius color]
可叠加多组，逗号分隔。
示例：box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
inset 内阴影；blur 为模糊半径（越大越模糊）；spread 扩展半径。

2.3 `border-image`

将图片用作边框，需配合 border 样式。
属性简写：border-image: source slice width outset repeat;
border-image-source: url(...)
border-image-slice：切割图片（无单位数字或百分比）
border-image-repeat：stretch（默认）、repeat、round、space

2.4 背景增强

多背景：逗号分隔多个 background-image，先声明的在上层。
css
```
background-image: url(top.png), url(bg.png);
```
1
background-size：cover（铺满容器，可能裁剪）、contain（完整显示，可能留白）、具体长度/百分比。
background-origin：背景定位原点（border-box、padding-box、content-box）。
background-clip：背景绘制区域（类似 border-box、padding-box、content-box、text（需前缀））。
background-attachment: local：随元素滚动（滚动条滚动时背景移动）。

2.5 `box-decoration-break`

控制元素分片（如多列、断行）时背景和边框的渲染方式：slice（切片）或 clone（独立克隆）。

3. 渐变（Gradients）

线性渐变：linear-gradient(direction, color-stop1, color-stop2, ...)
- 方向：to right、to bottom right、角度 45deg。
- 色标：red 0%, blue 100%。
径向渐变：radial-gradient(shape size at position, color-stops)
- 形状：circle 或 ellipse。
- 大小：closest-side、farthest-corner 等。
重复渐变：repeating-linear-gradient / repeating-radial-gradient。
渐变可理解为图像，用于任何 background-image 属性。

4. 文本效果

text-shadow：语法同 box-shadow，无 spread 和 inset。示例：text-shadow: 1px 1px 2px black;
text-overflow：处理溢出文本，常用 ellipsis（省略号）。需要配合 overflow: hidden 和 white-space: nowrap。
overflow-wrap（旧 word-wrap）：break-word 允许长单词断行。
word-break：break-all（任意字符间断行）、keep-all（保持单词完整性，如中文）。

@font-face：定义自定义字体。

css

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2"), url("myfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

font-kerning：控制字体字距调整。

5. 2D/3D 变换（Transforms）

5.1 2D 变换函数

translate(x, y)：位移，translateX()、translateY()。
rotate(angle)：旋转（deg 或 rad）。
scale(x, y)：缩放，scaleX()、scaleY()。
skew(x-angle, y-angle)：倾斜。
matrix(a, b, c, d, e, f)：组合变换矩阵。

5.2 3D 变换

translate3d(x, y, z)、rotate3d(x, y, z, angle)、scale3d(x, y, z)。
perspective(n)：为元素设置透视（也可在父元素用 perspective 属性）。
transform-style: preserve-3d：允许子元素在 3D 空间中保留位置。
backface-visibility: visible | hidden：背面是否可见。

5.3 变换原点 `transform-origin`

默认为 center，可指定 top left、50% 50% 或长度值。

6. 过渡（Transitions）

允许 CSS 属性值变化时平滑过渡。
属性：
- transition-property：指定过渡的属性（all 或具体属性如 width）。
- transition-duration：持续时间（如 0.3s）。
- transition-timing-function：缓动函数（ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier()）。
- transition-delay：延迟时间。
简写：transition: all 0.3s ease 0s;。
触发方式：伪类（:hover、:focus）或 JS 改变样式。
注意：不是所有属性都可过渡，如 display 不能过渡（可用 visibility 或 opacity 配合）。

7. 动画（Animations）

比过渡更灵活，可定义多阶段关键帧。
步骤：
1. 定义 @keyframes：
  css
```
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
```
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
2. 应用动画属性：
  - animation-name
  - animation-duration
  - animation-timing-function
  - animation-delay
  - animation-iteration-count（infinite 或数字）
  - animation-direction（normal、reverse、alternate、alternate-reverse）
  - animation-fill-mode（forwards 保持最后一帧、backwards 应用第一帧、both）
  - animation-play-state（running、paused）
- 简写：animation: slideIn 1s ease 0s infinite alternate;

8. 多列布局（Multi-column Layout）

将内容分列，类似报纸。
属性：
- column-count：列数。
- column-width：每列宽度（二者其一即可）。
- column-gap：列间距。
- column-rule：列间分隔线（类似 border）。
- column-span：元素跨列（如标题跨所有列）。
- column-fill：auto（顺序填充）或 balance（尽量均衡）。
注意：分列不影响 DOM 结构，适合纯文本排版。

9. 弹性盒布局（Flexbox）

9.1 容器属性

display: flex 或 inline-flex。
flex-direction：主轴方向（row（默认）、row-reverse、column、column-reverse）。
flex-wrap：是否换行（nowrap、wrap、wrap-reverse）。
flex-flow：flex-direction 和 flex-wrap 简写。
justify-content：主轴对齐方式（flex-start、flex-end、center、space-between、space-around、space-evenly）。
align-items：交叉轴对齐（stretch（默认）、flex-start、flex-end、center、baseline）。
align-content：多行/多列交叉轴对齐（类似 justify-content，需 flex-wrap: wrap 生效）。

9.2 项目属性

order：排序，数值越小越靠前。
flex-grow：放大比例（默认 0，不放大）。
flex-shrink：缩小比例（默认 1，空间不足时缩小）。
flex-basis：项目在主轴上的初始大小（默认 auto，可设具体长度）。
flex：flex-grow、flex-shrink、flex-basis 简写。常用 flex: 1（等分）。
align-self：覆盖容器的 align-items。

9.3 常见布局模式

垂直居中：容器 display: flex; align-items: center; justify-content: center;
圣杯布局（两侧固定中间自适应）：两边项目 flex: 0 0 200px;，中间 flex: 1;

10. 网格布局（Grid）

10.1 容器属性

display: grid / inline-grid。
定义网格结构：
- grid-template-rows：行高列表（如 100px 1fr 100px）。
- grid-template-columns：列宽列表（如 200px 1fr 200px）。
- 单位：fr（剩余空间比例）、auto（内容撑开）、minmax(min, max)。
- repeat() 函数：repeat(3, 1fr)。

grid-template-areas：命名区域，用字符串表示布局。

css

grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";

gap / grid-gap（row-gap、column-gap）：网格间距。
对齐：
- justify-items：水平方向单元格内对齐（start、end、center、stretch）。
- align-items：垂直方向。
- justify-content：整个网格在容器内的水平对齐。
- align-content：垂直对齐。

10.2 项目属性

定位：
- grid-row-start、grid-row-end、grid-column-start、grid-column-end。
- 简写 grid-row: 1 / 3（从第 1 条线到第 3 条线）。
- 可使用 span 关键字：grid-column: span 2;
grid-area：可指定四个边界线，或引用 grid-template-areas 的区域名。
对齐覆盖：justify-self、align-self。

11. 媒体查询（Media Queries）

根据设备特性应用不同 CSS。
语法：@media media-type and (media-feature) { ... }
媒体类型：all、screen、print、speech（CSS2 已有，CSS3 扩充）。
常用媒体特性：
- width、min-width、max-width
- height、orientation（portrait / landscape）
- aspect-ratio
- resolution（dpi、dpcm）
- prefers-color-scheme（浅色/深色模式，较晚加入但常归入 CSS3+）
逻辑操作：and、not、only、逗号（表示 or）。

示例：

css

@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

12. 变量（CSS Custom Properties）

定义：--var-name: value;（通常定义在 :root 中实现全局）。
使用：var(--var-name, fallback)。
作用域：遵循 CSS 层叠规则，可在任意选择器内定义。
动态性：可通过 JS 修改（element.style.setProperty('--var', 'new')），且支持过渡。

示例：

css

:root {
  --primary-color: #3498db;
}
button {
  background-color: var(--primary-color);
}

13. 颜色与透明度

rgba()：红绿蓝 + alpha（0~1）。
hsla()：色相（0~360）、饱和度（0%~100%）、亮度（0%~100%）、alpha。
opacity：元素整体透明度（0~1），影响所有子元素。与 rgba 背景透明不同。
颜色关键字：transparent（完全透明）在 CSS2 已有，CSS3 标准化。

14. 盒模型增强

box-sizing: border-box：使 width/height 包含 padding 和 border。被广泛用于重置样式（*, *::before, *::after { box-sizing: border-box; }）。

15. 滤镜与混合模式

15.1 `filter`

函数：blur(5px)、brightness(0.8)、contrast(200%)、drop-shadow(offset-x offset-y blur color)、grayscale(100%)、hue-rotate(90deg)、invert(1)、opacity(0.5)、saturate(2)、sepia(1)。
可组合：filter: blur(2px) brightness(0.8);

15.2 `backdrop-filter`

对元素后方区域应用滤镜（毛玻璃效果），需注意性能。

15.3 混合模式

mix-blend-mode：元素内容与背景混合（multiply、screen、overlay 等）。
background-blend-mode：多背景图片之间的混合。

16. 遮罩与裁剪

clip-path：裁剪元素显示区域。形状函数：circle(50%)、ellipse()、polygon(0% 0%, 100% 0%, 100% 100%)、inset()。也可引用 SVG 路径。
mask 系列属性：类似图片遮罩，mask-image、mask-size 等（部分浏览器需前缀）。

17. 滚动行为

scroll-behavior: smooth：使页面内锚点滚动平滑（而不是瞬间跳转）。
CSS Scroll Snap：控制滚动容器停止位置。
- 容器：scroll-snap-type: x mandatory;
- 子项：scroll-snap-align: start;

18. 用户界面与指针

resize：允许用户调整元素尺寸（both、horizontal、vertical），需配合 overflow: auto。
outline-offset：轮廓偏移量。
caret-color：文本输入光标颜色。
pointer-events：控制元素是否成为鼠标事件的目标（auto、none）。
- pointer-events: none 使元素“穿透”鼠标事件。

19. 书写模式与逻辑属性

writing-mode：horizontal-tb、vertical-rl、vertical-lr（用于东亚文字排版）。
逻辑属性：替代物理方向，适应不同书写模式。
- margin-inline-start / margin-inline-end（对应左/右或上/下）
- padding-block-start 等。
- 简写：margin-block、padding-inline。

20. 其他

will-change：提前告知浏览器即将变化的属性，优化动画性能（如 will-change: transform;）。
content 增强：attr() 可获取任意 HTML 属性的值，如 content: attr(data-tooltip);。

@supports：条件判断是否支持某 CSS 特性。

css

@supports (display: grid) {
  .container {
    display: grid;
  }
}

全局关键字：initial（恢复初始值）、inherit（继承父值）、unset（可继承则继承，否则初始）、revert（恢复浏览器样式）。

面试题及最佳回答范例（针对 CSS3）

面试题 1：CSS3 的 `box-sizing` 属性有什么作用？为什么推荐使用 `border-box`？

最佳回答：

作用：box-sizing 控制元素 width 和 height 的计算范围。

content-box（默认）：宽度仅包含内容区，不包含 padding 和 border。实际占据宽度 = width + padding + border。
border-box：宽度包含内容、padding 和 border。设置 width: 100px 后，padding 和 border 向内缩，总宽度固定为 100px。

推荐使用 border-box 的原因：

布局计算更直观：避免因添加 padding/border 导致元素溢出父容器。
响应式设计友好：百分比宽度配合固定 padding 时不会破坏网格。
符合直觉：大多数开发人员期望宽高包含内边距和边框。
业界常用重置：*, *::before, *::after { box-sizing: border-box; } 可以避免很多布局 bug。

面试题 2：请解释 Flexbox 的 `flex` 属性简写，以及 `flex: 1` 的含义。

最佳回答：

flex 是 flex-grow、flex-shrink、flex-basis 的简写。

flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;。
- flex-grow: 1：项目占据剩余空间的比例为 1（如果多个兄弟都是 1，则等分）。
- flex-shrink: 1：空间不足时允许缩小。
- flex-basis: 0%：初始主轴尺寸为 0，所有空间都由 flex-grow 分配。
常见简写：
- flex: none = 0 0 auto（不伸缩，固定尺寸）
- flex: auto = 1 1 auto（可伸缩，基于内容）
- flex: 2 = 2 1 0%（占据剩余空间的两倍于 flex:1 的元素）

注意：flex: 1 常用于等分列布局（如导航栏各选项均匀分布）。

面试题 3：CSS Grid 和 Flexbox 有什么区别？什么时候用 Grid，什么时候用 Flexbox？

最佳回答：

特性	Flexbox (一维)	Grid (二维)
维度	主要控制行或列（单方向）	同时控制行和列（双方向）
内容驱动	项目尺寸可以基于内容自动调整	布局更严格，可定义显式网格
对齐能力	强大，尤其适合导航、列表、居中	对齐同样强大，且可跨单元格
适用场景	组件内部布局、元素排列、间距不确定的流式布局	整体页面结构、复杂多区域布局、卡片墙

使用建议：

用 Flexbox：导航栏、按钮组、列表项、居中元素、元素间距自动调整的场景。
用 Grid：整体页面框架（header/sidebar/main/footer）、图片画廊、表单结构、需要对齐行列的区域。
二者可结合：Grid 做宏观布局，内部组件再用 Flexbox。

面试题 4：CSS3 动画和过渡（transition）有什么区别？

最佳回答：

对比项	过渡（Transition）	动画（Animation）
触发方式	需要状态改变（如 `:hover`、类名变化）	自动播放（可循环）
关键帧	只有起始和结束两个状态	可定义多个关键帧（`@keyframes`）
循环	无法无限循环（除非用 JS 触发）	可设置 `infinite`
控制	可控制延迟、时长、缓动	额外可控制播放方向、填充模式、暂停/运行
复杂程度	简单、轻量	更强大，适合复杂序列

使用场景：

Transition：鼠标悬停按钮变色、展开折叠面板、简单悬停效果。
Animation：加载动画、循环滚动、开场效果、更精细的控制。

面试题 5：请解释 `transform` 和 `translate` 的区别（或者 `rotate`/`scale` 等函数的意义）。

最佳回答：

transform 是一个 CSS 属性，其值是一个或多个变换函数，例如 translate()、rotate()、scale()、skew() 等。

translate(x, y)：位移函数，改变元素位置。
rotate(angle)：旋转。
scale(x, y)：缩放。
使用示例：transform: translate(50px, 100px) rotate(45deg);（先位移后旋转，顺序影响结果）。

注意：

transform 不会影响文档流（其他元素位置不变）。
变换元素会创建新的层叠上下文和包含块（影响 position: fixed 子元素）。
使用 GPU 加速（will-change: transform）可获得流畅动画。

常见误区：translate 是函数而不是独立属性，不能写成 translate: 10px（除非使用 CSS 的 translate 属性，那是较新的独立属性，但支持度有限）。

面试题 6：`calc()` 函数有什么作用？举例说明。

最佳回答：

calc() 允许在 CSS 中进行混合单位计算，支持加减乘除（+ 和 - 号两侧必须有空格）。

作用：解决固定值与相对值的动态组合问题。

示例：

宽度为父容器的 50% 减去 20px：width: calc(50% - 20px);
字体大小基于视口和绝对单位：font-size: calc(1rem + 2vw);
高度占满剩余视口：height: calc(100vh - 80px);

注意：calc() 可用于任何需要数值的 CSS 属性（长度、角度、时间等）。

面试题 7：`@media` 查询如何实现深色模式适配？

最佳回答：

使用媒体特性 prefers-color-scheme：

css

/* 浅色模式（默认） */
body {
  background-color: white;
  color: black;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
  a {
    color: #80bfff;
  }
}

说明：

检测操作系统或浏览器设置的配色偏好。
通常配合 CSS 变量简化颜色切换。
注意：某些浏览器需要用户明确设置，且可能不支持。可提供手动切换按钮作为备选。

面试题 8：`filter` 和 `backdrop-filter` 的区别是什么？

最佳回答：

属性	作用对象	典型效果
`filter`	元素本身的内容（文字、背景图片、子元素）	模糊、灰度、亮度等，影响整个元素
`backdrop-filter`	元素后方的区域（透过元素看到的背景）	毛玻璃效果，不影响元素内部内容

示例：

css

/* 图片加模糊 */
img {
  filter: blur(5px);
}

/* 半透明毛玻璃导航栏 */
.navbar {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
}

注意：backdrop-filter 性能开销较大，谨慎使用；某些浏览器需前缀 -webkit-backdrop-filter。

面试题 9：`will-change` 属性有何作用？什么时候使用？

最佳回答：

作用：提示浏览器某个元素将要发生特定的变化（如 transform、opacity），让浏览器提前进行优化（例如提升到独立图层），避免动画开始时的卡顿。

使用时机：

元素将频繁执行 CSS 动画或过渡（尤其是 3D 变换、滚动视差等）。
动画开始前（如通过 JS 添加类，或提前一小段时间设置）。

示例：

css

.box {
  will-change: transform, opacity;
}
.box:hover {
  transform: scale(1.1);
  transition: transform 0.3s;
}

注意事项：

不要过度使用（每个元素都加 will-change），会导致内存消耗和图层爆炸。
使用后应移除（动画结束后通过 JS 删除属性），避免长期占用资源。
不能替代性能分析，应优先使用 transform 和 opacity 等廉价属性。

面试题 10：如何使用 CSS3 实现一个三角形（纯 CSS）？请写出代码。

最佳回答：

利用 border 特性，将宽高设为 0，通过透明边框和有色边框实现。

css

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

解释：

四个边框交界处为斜线，当宽度为 0 时，边框形成四个三角形。
设置三个边框透明，只保留一个方向的边框颜色，即得到指向相反方向的三角形。
调整边框宽度可改变三角形形状（等腰、直角等）。

变体：

右上三角形：border-top: 50px solid red; border-left: 50px solid transparent;
箭头：可以用伪元素 ::before + 旋转。

以上是对“知识点四（CSS3 新增知识点）”的详细补充及常见面试题最佳回答。建议结合实际项目练习，理解各新特性的兼容性要求（如使用 Autoprefixer 处理厂商前缀）。

CSS3 新特性 ​

知识点四：CSS3 新增知识点详细补充 ​

1. 新增选择器 ​

1.1 属性选择器增强 ​

1.2 结构伪类 ​

1.3 否定伪类 ​

1.4 目标伪类 ​

1.5 UI 状态伪类 ​

1.6 伪元素双冒号规范 ​

2. 圆角、阴影与边框背景增强 ​

2.1 border-radius ​

2.2 box-shadow ​

2.3 border-image ​

2.4 背景增强 ​

2.5 box-decoration-break ​

3. 渐变（Gradients） ​

4. 文本效果 ​

5. 2D/3D 变换（Transforms） ​

5.1 2D 变换函数 ​

5.2 3D 变换 ​

5.3 变换原点 transform-origin ​

6. 过渡（Transitions） ​

7. 动画（Animations） ​

8. 多列布局（Multi-column Layout） ​

9. 弹性盒布局（Flexbox） ​

9.1 容器属性 ​

9.2 项目属性 ​

9.3 常见布局模式 ​

10. 网格布局（Grid） ​

10.1 容器属性 ​

10.2 项目属性 ​

11. 媒体查询（Media Queries） ​

12. 变量（CSS Custom Properties） ​

13. 颜色与透明度 ​

14. 盒模型增强 ​

15. 滤镜与混合模式 ​

15.1 filter ​

15.2 backdrop-filter ​

15.3 混合模式 ​

16. 遮罩与裁剪 ​

17. 滚动行为 ​

18. 用户界面与指针 ​

19. 书写模式与逻辑属性 ​

20. 其他 ​

面试题及最佳回答范例（针对 CSS3） ​

面试题 1：CSS3 的 box-sizing 属性有什么作用？为什么推荐使用 border-box？ ​

面试题 2：请解释 Flexbox 的 flex 属性简写，以及 flex: 1 的含义。 ​

面试题 3：CSS Grid 和 Flexbox 有什么区别？什么时候用 Grid，什么时候用 Flexbox？ ​

面试题 4：CSS3 动画和过渡（transition）有什么区别？ ​

面试题 5：请解释 transform 和 translate 的区别（或者 rotate/scale 等函数的意义）。 ​

面试题 6：calc() 函数有什么作用？举例说明。 ​

面试题 7：@media 查询如何实现深色模式适配？ ​

面试题 8：filter 和 backdrop-filter 的区别是什么？ ​

面试题 9：will-change 属性有何作用？什么时候使用？ ​

面试题 10：如何使用 CSS3 实现一个三角形（纯 CSS）？请写出代码。 ​

CSS3 新特性

知识点四：CSS3 新增知识点详细补充

1. 新增选择器

1.1 属性选择器增强

1.2 结构伪类

1.3 否定伪类

1.4 目标伪类

1.5 UI 状态伪类

1.6 伪元素双冒号规范

2. 圆角、阴影与边框背景增强

2.1 `border-radius`

2.2 `box-shadow`

2.3 `border-image`

2.4 背景增强

2.5 `box-decoration-break`

3. 渐变（Gradients）

4. 文本效果

5. 2D/3D 变换（Transforms）

5.1 2D 变换函数

5.2 3D 变换

5.3 变换原点 `transform-origin`

6. 过渡（Transitions）

7. 动画（Animations）

8. 多列布局（Multi-column Layout）

9. 弹性盒布局（Flexbox）

9.1 容器属性

9.2 项目属性

9.3 常见布局模式

10. 网格布局（Grid）

10.1 容器属性

10.2 项目属性

11. 媒体查询（Media Queries）

12. 变量（CSS Custom Properties）

13. 颜色与透明度

14. 盒模型增强

15. 滤镜与混合模式

15.1 `filter`

15.2 `backdrop-filter`

15.3 混合模式

16. 遮罩与裁剪

17. 滚动行为

18. 用户界面与指针

19. 书写模式与逻辑属性

20. 其他

面试题及最佳回答范例（针对 CSS3）

面试题 1：CSS3 的 `box-sizing` 属性有什么作用？为什么推荐使用 `border-box`？

面试题 2：请解释 Flexbox 的 `flex` 属性简写，以及 `flex: 1` 的含义。

面试题 3：CSS Grid 和 Flexbox 有什么区别？什么时候用 Grid，什么时候用 Flexbox？

面试题 4：CSS3 动画和过渡（transition）有什么区别？

面试题 5：请解释 `transform` 和 `translate` 的区别（或者 `rotate`/`scale` 等函数的意义）。

面试题 6：`calc()` 函数有什么作用？举例说明。

面试题 7：`@media` 查询如何实现深色模式适配？

面试题 8：`filter` 和 `backdrop-filter` 的区别是什么？

面试题 9：`will-change` 属性有何作用？什么时候使用？

面试题 10：如何使用 CSS3 实现一个三角形（纯 CSS）？请写出代码。