第 3 章形状

覆盖椭圆、平行四边形、菱形、切角、梯形标签与饼图的几何构造；用渲染探针、值处理轨迹和渐进增强发布门完成独立复核。

学习目标

能说明“第 3 章形状”如何覆盖椭圆、平行四边形、菱形、切角、梯形标签与饼图的几何构造，并明确2015原书技巧、现行规范事实与现代替代之间的时间边界
能先预测“怎样从边界框、变换、裁剪路径或渐变角度推导形状，并保持内容不被错误变换？”的计算值或绘制结果，再沿DOM、声明、层叠、计算、布局与绘制逐阶段核对
能注入“对整个按钮做skew而未反向校正内容，文字和点击边界一起倾斜且难以阅读”，用“形状边界、内容坐标、命中区域、裁剪回退和宽高比均可测量，装饰几何不改变语义顺序”决定接受、修正或拒绝样式发布

为什么从这个CSS问题开始

形状页不把几何效果当成图片；每个方案都要说明哪个盒被变换、哪个区域被裁剪以及内容是否仍可读可点。 “第 3 章形状”使用的贯穿任务是：为标签导航制作平行四边形、切角卡和饼图徽章，分别验证文字、焦点环与点击区域。操作前先预测哪个声明、计算值、布局盒或绘制层会变化，渲染后再补理由不算预测。

本页围绕“怎样从边界框、变换、裁剪路径或渐变角度推导形状，并保持内容不被错误变换？”建立正常、反例与恢复路径。只有“第 3 章形状”保持“形状边界、内容坐标、命中区域、裁剪回退和宽高比均可测量，装饰几何不改变语义顺序”并交付边界框、半径、变换矩阵、反向内容变换、clip-path顶点、命中测试、比例文本、焦点环和不支持时回退。，视觉效果才构成CSS证据。

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

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

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

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

公开目录坐标与CSS机制

第3章形状

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

9 自适应的椭圆

公开坐标 2/7。 9 自适应的椭圆进入“第 3 章形状”后要回答第2张声明卡：它怎样用半径、变换、裁剪路径或角度构造几何边界、改变哪个计算值或绘制层、由哪些边界框、变换矩阵、裁剪顶点、内容坐标和命中测试证明，并如何排除装饰变换同时扭曲内容或焦点。

10 平行四边形

公开坐标 3/7。 围绕“怎样从边界框、变换、裁剪路径或渐变角度推导形状，并保持内容不被错误变换？”，条目3把10 平行四边形解释为用半径、变换、裁剪路径或角度构造几何边界；复核者先读取边界框、变换矩阵、裁剪顶点、内容坐标和命中测试再判断截图，不能接受装饰变换同时扭曲内容或焦点。

11 菱形图片

公开坐标 4/7。 对“第 3 章形状”而言，11 菱形图片的最小合同是用半径、变换、裁剪路径或角度构造几何边界，第4次检查保存边界框、变换矩阵、裁剪顶点、内容坐标和命中测试；若产生装饰变换同时扭曲内容或焦点，就回到声明、层叠或布局上游。

12 切角效果

公开坐标 5/7。 第5个公开目录坐标12 切角效果服务于覆盖椭圆、平行四边形、菱形、切角、梯形标签与饼图的几何构造，需要以边界框、变换矩阵、裁剪顶点、内容坐标和命中测试呈现用半径、变换、裁剪路径或角度构造几何边界；装饰变换同时扭曲内容或焦点会破坏“形状边界、内容坐标、命中区域、裁剪回退和宽高比均可测量，装饰几何不改变语义顺序”。

13 梯形标签页

公开坐标 6/7。 学习者在“第 3 章形状”中讨论13 梯形标签页前预测用半径、变换、裁剪路径或角度构造几何边界会改变哪项值或像素状态，再读取边界框、变换矩阵、裁剪顶点、内容坐标和命中测试；观察到装饰变换同时扭曲内容或焦点时保留失败轨迹。

14 简单的饼图

公开坐标 7/7。 为标签导航制作平行四边形、切角卡和饼图徽章，分别验证文字、焦点环与点击区域。在条目7处理14 简单的饼图时，要把用半径、变换、裁剪路径或角度构造几何边界写进样式合同，把边界框、变换矩阵、裁剪顶点、内容坐标和命中测试写进运行记录，并把装饰变换同时扭曲内容或焦点写进反例。

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

分步1 / 3

1. 声明与渲染探针

切换“自适应椭圆、切角卡片、圆锥饼图”并一次只调整一个控制量，核对声明、回退和实际绘制怎样连接“第 3 章形状”。

声明与渲染探针

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

怎样从边界框、变换、裁剪路径或渐变角度推导形状，并保持内容不被错误变换？

单一控制量：50border-radius: 50%

基线：普通圆角矩形

半径相对边框盒随宽高变化

自适应椭圆

本页目录坐标：第3章形状、9 自适应的椭圆、10 平行四边形、11 菱形图片、12 切角效果、13 梯形标签页、14 简单的饼图

第 3 章形状的可重放CSS协议

阶段	CSS动作	必留证据	拒绝条件
选择边界框和几何原语	在“第 3 章形状”执行选择边界框和几何原语，一次只改变一个声明或环境条件	DOM、浏览器基线、视口、字体与初始样式	语义或依赖不可追溯
分离内容与装饰变换	在“第 3 章形状”执行分离内容与装饰变换，一次只改变一个声明或环境条件	层叠来源、computed style、布局盒与绘制截图	对整个按钮做skew而未反向校正内容，文字和点击边界一起倾斜且难以阅读
验证裁剪命中与回退	在“第 3 章形状”执行验证裁剪命中与回退，一次只改变一个声明或环境条件	回退、输入、偏好、性能与现代边界记录	无法重放或恢复基础样式

unit: "csec-unit-03"
question: "怎样从边界框、变换、裁剪路径或渐变角度推导形状，并保持内容不被错误变换？"
scenario: "为标签导航制作平行四边形、切角卡和饼图徽章，分别验证文字、焦点环与点击区域。"
recipes: ["自适应椭圆", "切角卡片", "圆锥饼图"]
stages: ["选择边界框和几何原语", "分离内容与装饰变换", "验证裁剪命中与回退"]
invariant: "形状边界、内容坐标、命中区域、裁剪回退和宽高比均可测量，装饰几何不改变语义顺序"
fault: "对整个按钮做skew而未反向校正内容，文字和点击边界一起倾斜且难以阅读"
evidence: "边界框、半径、变换矩阵、反向内容变换、clip-path顶点、命中测试、比例文本、焦点环和不支持时回退。"
reset: restore_recipe_value_trace_step_gates_and_artifact

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

本页回顾

掌握“第 3 章形状”不是背诵代码片段，而是能围绕“怎样从边界框、变换、裁剪路径或渐变角度推导形状，并保持内容不被错误变换？”重建值处理与绘制路径，并用“形状边界、内容坐标、命中区域、裁剪回退和宽高比均可测量，装饰几何不改变语义顺序”拒绝“对整个按钮做skew而未反向校正内容，文字和点击边界一起倾斜且难以阅读”。最终交付为边界框、半径、变换矩阵、反向内容变换、clip-path顶点、命中测试、比例文本、焦点环和不支持时回退。

练习与答案

练习

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

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

“第 3 章形状”的第3章形状：以“封闭本章问题类型、规范机制与回退证据”解释CSS作用，用“目录坐标、编号技巧、相邻章节和发布结论”提供复核。
“第 3 章形状”的9 自适应的椭圆：以“用半径、变换、裁剪路径或角度构造几何边界”解释CSS作用，用“边界框、变换矩阵、裁剪顶点、内容坐标和命中测试”提供复核。
“第 3 章形状”的10 平行四边形：以“用半径、变换、裁剪路径或角度构造几何边界”解释CSS作用，用“边界框、变换矩阵、裁剪顶点、内容坐标和命中测试”提供复核。
“第 3 章形状”的11 菱形图片：以“用半径、变换、裁剪路径或角度构造几何边界”解释CSS作用，用“边界框、变换矩阵、裁剪顶点、内容坐标和命中测试”提供复核。
“第 3 章形状”的12 切角效果：以“用半径、变换、裁剪路径或角度构造几何边界”解释CSS作用，用“边界框、变换矩阵、裁剪顶点、内容坐标和命中测试”提供复核。
“第 3 章形状”的13 梯形标签页：以“用半径、变换、裁剪路径或角度构造几何边界”解释CSS作用，用“边界框、变换矩阵、裁剪顶点、内容坐标和命中测试”提供复核。
“第 3 章形状”的14 简单的饼图：以“用半径、变换、裁剪路径或角度构造几何边界”解释CSS作用，用“边界框、变换矩阵、裁剪顶点、内容坐标和命中测试”提供复核。

问题 3：反例恢复。 怎样证明“对整个按钮做skew而未反向校正内容，文字和点击边界一起倾斜且难以阅读”已经被修正？

为“第 3 章形状”复用同一DOM、浏览器、视口、字体、输入和偏好，重放正常路径后只注入“对整个按钮做skew而未反向校正内容，文字和点击边界一起倾斜且难以阅读”；记录最早偏离点，撤销故障并再次运行。只有渲染探针、值处理轨迹、发布门和边界框、半径、变换矩阵、反向内容变换、clip-path顶点、命中测试、比例文本、焦点环和不支持时回退。重新满足“形状边界、内容坐标、命中区域、裁剪回退和宽高比均可测量，装饰几何不改变语义顺序”，修正才可提交。

名词解释

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

形状: 对应“第3章形状”；在“第 3 章形状”中用于封闭本章问题类型、规范机制与回退证据，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
自适应的椭圆: 对应“9 自适应的椭圆”；在“第 3 章形状”中用于用半径、变换、裁剪路径或角度构造几何边界，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
平行四边形: 对应“10 平行四边形”；在“第 3 章形状”中用于用半径、变换、裁剪路径或角度构造几何边界，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
菱形图片: 对应“11 菱形图片”；在“第 3 章形状”中用于用半径、变换、裁剪路径或角度构造几何边界，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
切角效果: 对应“12 切角效果”；在“第 3 章形状”中用于用半径、变换、裁剪路径或角度构造几何边界，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
梯形标签页: 对应“13 梯形标签页”；在“第 3 章形状”中用于用半径、变换、裁剪路径或角度构造几何边界，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
简单的饼图: 对应“14 简单的饼图”；在“第 3 章形状”中用于用半径、变换、裁剪路径或角度构造几何边界，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。

第 3 章 形状

学习目标

为什么从这个CSS问题开始

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

公开目录坐标与CSS机制

第3章 形状

9 自适应的椭圆

10 平行四边形

11 菱形图片

12 切角效果

13 梯形标签页

14 简单的饼图

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

1. 声明与渲染探针

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

第 3 章 形状的可重放CSS协议

本页回顾

练习与答案

练习

名词解释

名词解释

讨论

第 3 章形状

第3章形状

第 3 章形状的可重放CSS协议