第 2 章背景与边框

覆盖半透明与多重边框、背景定位、内圆角、条纹图案、伪随机纹理和连续图像边框；用渲染探针、值处理轨迹和渐进增强发布门完成独立复核。

学习目标

能说明“第 2 章背景与边框”如何覆盖半透明与多重边框、背景定位、内圆角、条纹图案、伪随机纹理和连续图像边框，并明确2015原书技巧、现行规范事实与现代替代之间的时间边界
能先预测“怎样把多个背景层、边框绘制区和渐变尺寸写成可计算的层序，而不是靠截图猜位置？”的计算值或绘制结果，再沿DOM、声明、层叠、计算、布局与绘制逐阶段核对
能注入“半透明边框下的背景延伸到border-box，视觉上看不到透明效果且换背景后颜色污染”，用“背景层顺序、绘制区域、定位区域、尺寸、重复周期和边框盒均显式，透明层下方颜色可追溯”决定接受、修正或拒绝样式发布

为什么从这个CSS问题开始

背景与边框页把视觉图案还原为多个绘制层；先确定每层覆盖哪个盒，再讨论渐变和图像。 “第 2 章背景与边框”使用的贯穿任务是：制作活动卡片，组合半透明边框、内圆角、斜纹背景与图像边框，并在三种容器尺寸下采样。操作前先预测哪个声明、计算值、布局盒或绘制层会变化，渲染后再补理由不算预测。

本页围绕“怎样把多个背景层、边框绘制区和渐变尺寸写成可计算的层序，而不是靠截图猜位置？”建立正常、反例与恢复路径。只有“第 2 章背景与边框”保持“背景层顺序、绘制区域、定位区域、尺寸、重复周期和边框盒均显式，透明层下方颜色可追溯”并交付background层序、origin与clip、位置、尺寸、色标周期、border-radius、border-image切片、三档尺寸截图和回退。，视觉效果才构成CSS证据。

原版47项技巧、57个目录坐标与现代边界

“第 2 章背景与边框”以O'Reilly官方目录核对Lea Verou著、2015年6月、388页、ISBN 9781449372736、八章和47个连续编号技巧；作者出版页确认《CSS Secrets》由O'Reilly于2015年出版，中文版书页核对《CSS揭秘》的中文出版信息。原版47项编号技巧分布在第2至第8章；若把八个章标题和第一章两个方法主题一起计算，公开目录共有57个坐标。

“第 2 章背景与边框”只依据官方目录限定范围，不逐段改写原文；解释、示例、交互、练习与答案均为独立教学重写。47是编号技巧分母，57是完整目录坐标分母，两者不能混称。

“第 2 章背景与边框”另以技术核对 1、技术核对 2、技术核对 3核对现行技术事实。2015年的技巧保留为历史方案；现行CSS规范用于解释仍成立的层叠、背景、几何、排印、布局与动画机制，或标出现代原生替代。现行语法不能倒填为原书内容，草案特性也不能冒充跨浏览器基线。

公开目录坐标与CSS机制

第2章背景与边框

公开坐标 1/9。 在“第 2 章背景与边框”的坐标1中，第2章背景与边框用于封闭本章问题类型、规范机制与回退证据；先固定DOM和浏览器基线，再用目录坐标、编号技巧、相邻章节和发布结论复核，出现跨章技巧脱离原始约束拼贴时不得提交。

1 半透明边框

公开坐标 2/9。 1 半透明边框进入“第 2 章背景与边框”后要回答第2张声明卡：它怎样协调边框盒、背景绘制区、定位区与多层绘制顺序、改变哪个计算值或绘制层、由哪些box边界、background-clip、origin、position与层序证明，并如何排除透明层下方背景污染或固定偏移。

2 多重边框

公开坐标 3/9。 围绕“怎样把多个背景层、边框绘制区和渐变尺寸写成可计算的层序，而不是靠截图猜位置？”，条目3把2 多重边框解释为协调边框盒、背景绘制区、定位区与多层绘制顺序；复核者先读取box边界、background-clip、origin、position与层序再判断截图，不能接受透明层下方背景污染或固定偏移。

3 灵活的背景定位

公开坐标 4/9。 对“第 2 章背景与边框”而言，3 灵活的背景定位的最小合同是协调边框盒、背景绘制区、定位区与多层绘制顺序，第4次检查保存box边界、background-clip、origin、position与层序；若产生透明层下方背景污染或固定偏移，就回到声明、层叠或布局上游。

4 边框内圆角

公开坐标 5/9。 第5个公开目录坐标4 边框内圆角服务于覆盖半透明与多重边框、背景定位、内圆角、条纹图案、伪随机纹理和连续图像边框，需要以box边界、background-clip、origin、position与层序呈现协调边框盒、背景绘制区、定位区与多层绘制顺序；透明层下方背景污染或固定偏移会破坏“背景层顺序、绘制区域、定位区域、尺寸、重复周期和边框盒均显式，透明层下方颜色可追溯”。

5 条纹背景

公开坐标 6/9。 学习者在“第 2 章背景与边框”中讨论5 条纹背景前预测以渐变色标、重复周期和图像切片生成可缩放纹理会改变哪项值或像素状态，再读取色标位置、background-size、重复最小公倍数与border-image切片；观察到图案周期或切片依赖单一尺寸时保留失败轨迹。

6 复杂的背景图案

公开坐标 7/9。 制作活动卡片，组合半透明边框、内圆角、斜纹背景与图像边框，并在三种容器尺寸下采样。在条目7处理6 复杂的背景图案时，要把以渐变色标、重复周期和图像切片生成可缩放纹理写进样式合同，把色标位置、background-size、重复最小公倍数与border-image切片写进运行记录，并把图案周期或切片依赖单一尺寸写进反例。

7 伪随机背景

公开坐标 8/9。 “背景层顺序、绘制区域、定位区域、尺寸、重复周期和边框盒均显式，透明层下方颜色可追溯”限定了7 伪随机背景的适用域：坐标8只能通过以渐变色标、重复周期和图像切片生成可缩放纹理推进，由色标位置、background-size、重复最小公倍数与border-image切片复核，而图案周期或切片依赖单一尺寸构成拒绝条件。

8 连续的图像边框

公开坐标 9/9。 在“第 2 章背景与边框”的坐标9中，8 连续的图像边框用于以渐变色标、重复周期和图像切片生成可缩放纹理；先固定DOM和浏览器基线，再用色标位置、background-size、重复最小公倍数与border-image切片复核，出现图案周期或切片依赖单一尺寸时不得提交。

先预测，再操作三个CSS实验

分步1 / 3

1. 声明与渲染探针

切换“半透明边框、条纹周期、连续图像边框”并一次只调整一个控制量，核对声明、回退和实际绘制怎样连接“第 2 章背景与边框”。

声明与渲染探针

改一个量，观察真实绘制结果

怎样把多个背景层、边框绘制区和渐变尺寸写成可计算的层序，而不是靠截图猜位置？

单一控制量：50background-clip: padding-box

基线：实色边框

阻止背景绘制到透明边框下方

半透明边框

本页目录坐标：第2章背景与边框、1 半透明边框、2 多重边框、3 灵活的背景定位、4 边框内圆角、5 条纹背景、6 复杂的背景图案、7 伪随机背景、8 连续的图像边框

第 2 章背景与边框的可重放CSS协议

阶段	CSS动作	必留证据	拒绝条件
声明盒模型和背景层序	在“第 2 章背景与边框”执行声明盒模型和背景层序，一次只改变一个声明或环境条件	DOM、浏览器基线、视口、字体与初始样式	语义或依赖不可追溯
计算定位尺寸与重复周期	在“第 2 章背景与边框”执行计算定位尺寸与重复周期，一次只改变一个声明或环境条件	层叠来源、computed style、布局盒与绘制截图	半透明边框下的背景延伸到border-box，视觉上看不到透明效果且换背景后颜色污染
检查透明边缘和图像切片	在“第 2 章背景与边框”执行检查透明边缘和图像切片，一次只改变一个声明或环境条件	回退、输入、偏好、性能与现代边界记录	无法重放或恢复基础样式

unit: "csec-unit-02"
question: "怎样把多个背景层、边框绘制区和渐变尺寸写成可计算的层序，而不是靠截图猜位置？"
scenario: "制作活动卡片，组合半透明边框、内圆角、斜纹背景与图像边框，并在三种容器尺寸下采样。"
recipes: ["半透明边框", "条纹周期", "连续图像边框"]
stages:
  ["声明盒模型和背景层序", "计算定位尺寸与重复周期", "检查透明边缘和图像切片"]
invariant: "背景层顺序、绘制区域、定位区域、尺寸、重复周期和边框盒均显式，透明层下方颜色可追溯"
fault: "半透明边框下的背景延伸到border-box，视觉上看不到透明效果且换背景后颜色污染"
evidence: "background层序、origin与clip、位置、尺寸、色标周期、border-radius、border-image切片、三档尺寸截图和回退。"
reset: restore_recipe_value_trace_step_gates_and_artifact

该协议要求“第 2 章背景与边框”在相同DOM、浏览器、视口、字体、输入和用户偏好下重放。重置后若技巧、控制量、轨迹模式、步骤、发布门或证据显示没有回到基线，交互状态已经污染比较，不能作为CSS证据。

本页回顾

掌握“第 2 章背景与边框”不是背诵代码片段，而是能围绕“怎样把多个背景层、边框绘制区和渐变尺寸写成可计算的层序，而不是靠截图猜位置？”重建值处理与绘制路径，并用“背景层顺序、绘制区域、定位区域、尺寸、重复周期和边框盒均显式，透明层下方颜色可追溯”拒绝“半透明边框下的背景延伸到border-box，视觉上看不到透明效果且换背景后颜色污染”。最终交付为background层序、origin与clip、位置、尺寸、色标周期、border-radius、border-image切片、三档尺寸截图和回退。

练习与答案

练习

问题 1：CSS合同。 “第 2 章背景与边框”为什么必须先声明DOM、浏览器基线、视口、字体、输入与用户偏好？

问题 2：目录逐项覆盖。 怎样证明本页公开目录坐标已经进入机制、交互和练习？

“第 2 章背景与边框”的第2章背景与边框：以“封闭本章问题类型、规范机制与回退证据”解释CSS作用，用“目录坐标、编号技巧、相邻章节和发布结论”提供复核。
“第 2 章背景与边框”的1 半透明边框：以“协调边框盒、背景绘制区、定位区与多层绘制顺序”解释CSS作用，用“box边界、background-clip、origin、position与层序”提供复核。
“第 2 章背景与边框”的2 多重边框：以“协调边框盒、背景绘制区、定位区与多层绘制顺序”解释CSS作用，用“box边界、background-clip、origin、position与层序”提供复核。
“第 2 章背景与边框”的3 灵活的背景定位：以“协调边框盒、背景绘制区、定位区与多层绘制顺序”解释CSS作用，用“box边界、background-clip、origin、position与层序”提供复核。
“第 2 章背景与边框”的4 边框内圆角：以“协调边框盒、背景绘制区、定位区与多层绘制顺序”解释CSS作用，用“box边界、background-clip、origin、position与层序”提供复核。
“第 2 章背景与边框”的5 条纹背景：以“以渐变色标、重复周期和图像切片生成可缩放纹理”解释CSS作用，用“色标位置、background-size、重复最小公倍数与border-image切片”提供复核。
“第 2 章背景与边框”的6 复杂的背景图案：以“以渐变色标、重复周期和图像切片生成可缩放纹理”解释CSS作用，用“色标位置、background-size、重复最小公倍数与border-image切片”提供复核。
“第 2 章背景与边框”的7 伪随机背景：以“以渐变色标、重复周期和图像切片生成可缩放纹理”解释CSS作用，用“色标位置、background-size、重复最小公倍数与border-image切片”提供复核。
“第 2 章背景与边框”的8 连续的图像边框：以“以渐变色标、重复周期和图像切片生成可缩放纹理”解释CSS作用，用“色标位置、background-size、重复最小公倍数与border-image切片”提供复核。

问题 3：反例恢复。 怎样证明“半透明边框下的背景延伸到border-box，视觉上看不到透明效果且换背景后颜色污染”已经被修正？

为“第 2 章背景与边框”复用同一DOM、浏览器、视口、字体、输入和偏好，重放正常路径后只注入“半透明边框下的背景延伸到border-box，视觉上看不到透明效果且换背景后颜色污染”；记录最早偏离点，撤销故障并再次运行。只有渲染探针、值处理轨迹、发布门和background层序、origin与clip、位置、尺寸、色标周期、border-radius、border-image切片、三档尺寸截图和回退。重新满足“背景层顺序、绘制区域、定位区域、尺寸、重复周期和边框盒均显式，透明层下方颜色可追溯”，修正才可提交。

名词解释

本章出现的专业名词，用大白话再讲一遍。

背景与边框: 对应“第2章背景与边框”；在“第 2 章背景与边框”中用于封闭本章问题类型、规范机制与回退证据，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
半透明边框: 对应“1 半透明边框”；在“第 2 章背景与边框”中用于协调边框盒、背景绘制区、定位区与多层绘制顺序，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
多重边框: 对应“2 多重边框”；在“第 2 章背景与边框”中用于协调边框盒、背景绘制区、定位区与多层绘制顺序，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
灵活的背景定位: 对应“3 灵活的背景定位”；在“第 2 章背景与边框”中用于协调边框盒、背景绘制区、定位区与多层绘制顺序，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
边框内圆角: 对应“4 边框内圆角”；在“第 2 章背景与边框”中用于协调边框盒、背景绘制区、定位区与多层绘制顺序，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
条纹背景: 对应“5 条纹背景”；在“第 2 章背景与边框”中用于以渐变色标、重复周期和图像切片生成可缩放纹理，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
复杂的背景图案: 对应“6 复杂的背景图案”；在“第 2 章背景与边框”中用于以渐变色标、重复周期和图像切片生成可缩放纹理，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
伪随机背景: 对应“7 伪随机背景”；在“第 2 章背景与边框”中用于以渐变色标、重复周期和图像切片生成可缩放纹理，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
连续的图像边框: 对应“8 连续的图像边框”；在“第 2 章背景与边框”中用于以渐变色标、重复周期和图像切片生成可缩放纹理，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。

第 2 章 背景与边框

学习目标

为什么从这个CSS问题开始

原版47项技巧、57个目录坐标与现代边界

公开目录坐标与CSS机制

第2章 背景与边框

1 半透明边框

2 多重边框

3 灵活的背景定位

4 边框内圆角

5 条纹背景

6 复杂的背景图案

7 伪随机背景

8 连续的图像边框

先预测，再操作三个CSS实验

1. 声明与渲染探针

改一个量，观察真实绘制结果

第 2 章 背景与边框的可重放CSS协议

本页回顾

练习与答案

练习

名词解释

名词解释

讨论

第 2 章背景与边框

第2章背景与边框

第 2 章背景与边框的可重放CSS协议