第 2 章 背景与边框

直觉起点

、、、、共同构成本页的观察坐标。利用背景绘制区、渐变图像、阴影扩张和边框图像，把装饰层压缩进单个元素并保持尺寸可调。本页覆盖 9 个公开目录条目。《CSS 揭秘》的价值不只是给出效果代码，而是展示怎样从限制条件中找到更少依赖的机制；所以每个示例都必须同时保留基线、增强和失败解释。

六阶段解题链

1. 分离内容与装饰

先写视觉与交互契约，不写具体属性。固定 DOM、文本、视口、字体和输入方式，预测无增强样式时应保留的内容、尺寸、焦点和阅读顺序。

2. 标出背景绘制区

查明目标效果属于盒生成、背景绘制、边框、滤镜、字体、布局还是合成阶段。只选能直接解释目标的机制，并注明规范能力与实现边界。

3. 组合多层图像

构造最小代码，删除重复数值、镜像状态和额外 DOM。先预测计算值与绘制区域，再运行正常样本，记录首个产生目标效果的声明。

4. 校准尺寸与定位

只改变一个变量，例如容器宽度、文本长度、背景、字体、输入方式或动态偏好。停止在首个偏离点，不用更多覆盖把失败截图修平。

5. 验证透明边界

关闭关键能力，检查自然回退是否仍可读、可操作、可布局。增强方案不能反向破坏基线，也不能以颜色、动画或装饰替代语义。

6. 保留纯色回退

清除故障后重放同一 DOM，确认没有旧内联样式、重复常量、隐藏焦点或层叠残留。把通过条件写成以后可以自动或人工复查的证据。

核心机制深挖

利用背景绘制区、渐变图像、阴影扩张和边框图像，把装饰层压缩进单个元素并保持尺寸可调。 解题时先区分结构事实、计算样式、绘制结果和交互状态：结构决定语义与可访问名称，级联和布局产生计算值与使用值，背景、边框、阴影、滤镜再参与绘制，动画与输入只改变状态。把这些阶段混在一起，往往会用多余 DOM 修背景、用固定尺寸修布局、用不可见原生控件修状态，最终难以维护。

本页签发不变量是：装饰层不能改变内容盒契约，透明、缩放和长内容条件下仍应出现可预测的边框与背景。 对每个方案都要问四个问题：不支持高级能力时剩下什么；内容变长时谁负责尺寸；键盘与触摸是否仍能完成任务；删除故障声明后是否回到同一基线。只有四问都有可复现答案，技巧才从演示升级为工程方案。

出版社目录逐项讲解

第2章 背景与边框

本章把背景和边框看成可叠放的绘制层。一个元素可以拥有多层背景图像、不同的定位与裁剪区域，再用阴影或 outline 增加边界；关键是明确每层相对 border box、padding box 还是 content box 计算。

证据记录从“分离内容与装饰”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

1 半透明边框

半透明边框会透出元素自己的背景，因此需要把背景绘制限制到 padding box。background-clip: padding-box 让背景止于内边距边缘，边框透明部分才能显示其后的页面；回退是实体边框，验收要换深浅两种底色。

证据记录从“标出背景绘制区”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

2 多重边框

box-shadow 的零偏移、零模糊和正扩张半径可以在盒外连续铺出多圈，outline 适合只增加一圈且不参与圆角。阴影不占布局空间也通常不接收事件，因此命中区与视觉边界要分别验证，不能用装饰假装真实尺寸。

证据记录从“组合多层图像”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

3 灵活的背景定位

background-position 的四值语法可从右侧或底部定位，background-origin 能把参照盒改为 content-box，calc 则把百分比与固定间距合成。选择一种参照系后只保留一个间距来源，避免 padding 与位置值重复表达同一约束。

证据记录从“校准尺寸与定位”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

4 边框内圆角

外层方角与内层圆角可由 background、border-radius 和 outline 组合；圆角背景形成内轮廓，outline 提供外轮廓，必要时用很小的 box-shadow 填补圆角与 outline 间的缝。必须测试半径变大时是否出现漏色。

证据记录从“验证透明边界”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

5 条纹背景

线性渐变在同一位置放置相邻色标会形成硬边，再由 background-size 定义一个重复单元。斜向条纹要区分渐变方向与平铺方向，常用 repeating-linear-gradient 直接表达周期；缩放时检查周期和边缘是否出现模糊。

证据记录从“保留纯色回退”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

6 复杂的背景图案

网格、波点和棋盘由多层渐变叠加，每层都有独立的位置与平铺尺寸。先画最小重复单元，再复制偏移层，不以大量 DOM 充当像素；改变主题色时应只改少量参数，同时保留纯色背景作为失败基线。

证据记录从“分离内容与装饰”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

7 伪随机背景

纯 CSS 没有随机函数，但多个周期互质的背景层会在最小公倍数之后才整体重复，产生足够长的伪随机序列。记录各层周期并计算总重复长度，避免误称真随机；对性能敏感场景减少图层和超大纹理。

证据记录从“标出背景绘制区”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

8 连续的图像边框

连续图像边框可由 border-image 切片，也可用两层背景：上层纯色裁剪到 padding-box，下层图像铺到 border-box。后者更容易保持正文背景，前者要明确 slice、width 与 repeat；改变盒尺寸时四边纹理应连续。

证据记录从“组合多层图像”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

方案比较矩阵

最小可运行实验

.panel {
  border: 10px solid rgb(255 255 255 / 0.45);
  background: #fff padding-box;
  box-shadow:
    0 0 0 1px rgb(15 23 42 / 0.18),
    0 0 0 6px rgb(37 99 235 / 0.2);
}
.stripes {
  background: linear-gradient(#2563eb 50%, #dbeafe 0);
  background-size: 100% 2rem;
}

<article class="secret component" data-enhanced>
  <button class="action" type="button">验证基线与增强</button>
  <p>用长内容、窄容器、键盘和能力缺失重放同一结构。</p>
</article>

book: CSS 揭秘
page: csec-02-backgrounds-borders
sample: baseline | enhanced | failure | recovery
toc_entries: 9
semantic_content_preserved: true
fallback_operable: true
first_divergence: null

常见误区与故障注入

四类样本与验收

目录证据：第2章 背景与边框、1 半透明边框、2 多重边框、3 灵活的背景定位、4 边框内圆角、5 条纹背景、6 复杂的背景图案、7 伪随机背景、8 连续的图像边框。本页不复制原书正文，而是按公开目录独立重构问题、机制、实验与验收，确保每个标题都有可执行学习证据。

练习

小结

• background-clip：连接“分离内容与装饰”与规范依赖。
• background-origin：连接“标出背景绘制区”与最小基线。
• box-shadow：连接“组合多层图像”与增强机制。
• linear-gradient：连接“校准尺寸与定位”与边界故障。
• border-image：连接“验证透明边界”与恢复证据。
• 9 个本页目录条目已经全部进入问题、机制、实现与验收链。
• 现代便利写法只作对照，原书 2015 年方案的机制身份与回退路径保持清楚。

术语表