第 4 章视觉效果

覆盖单侧与不规则投影、染色、毛玻璃和折角效果；用渲染探针、值处理轨迹和渐进增强发布门完成独立复核。

学习目标

能说明“第 4 章视觉效果”如何覆盖单侧与不规则投影、染色、毛玻璃和折角效果，并明确2015原书技巧、现行规范事实与现代替代之间的时间边界
能先预测“怎样区分盒投影、alpha轮廓投影、滤镜、背景模糊和伪元素层，并控制合成成本？”的计算值或绘制结果，再沿DOM、声明、层叠、计算、布局与绘制逐阶段核对
能注入“对整页内容使用大半径blur并持续动画，造成文字不可读、离屏缓冲放大和滚动掉帧”，用“效果作用对象、滤镜输入、模糊采样区、堆叠上下文、回退和性能边界明确”决定接受、修正或拒绝样式发布

为什么从这个CSS问题开始

视觉效果页先问浏览器在处理哪个像素输入；盒阴影、alpha投影和背景模糊不是同一条渲染路径。 “第 4 章视觉效果”使用的贯穿任务是：为弹层制作不规则投影、染色封面、毛玻璃背景和折角提示，分别记录合成层与可读性。操作前先预测哪个声明、计算值、布局盒或绘制层会变化，渲染后再补理由不算预测。

本页围绕“怎样区分盒投影、alpha轮廓投影、滤镜、背景模糊和伪元素层，并控制合成成本？”建立正常、反例与恢复路径。只有“第 4 章视觉效果”保持“效果作用对象、滤镜输入、模糊采样区、堆叠上下文、回退和性能边界明确”并交付效果输入、box-shadow或drop-shadow参数、滤镜序列、伪元素层、backdrop范围、对比度、合成性能和回退截图。，视觉效果才构成CSS证据。

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

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

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

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

公开目录坐标与CSS机制

第4章视觉效果

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

15 单侧投影

公开坐标 2/6。 15 单侧投影进入“第 4 章视觉效果”后要回答第2张声明卡：它怎样选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层、改变哪个计算值或绘制层、由哪些输入图像、阴影参数、滤镜序列、堆叠上下文和合成成本证明，并如何排除大范围滤镜牺牲可读性与性能。

16 不规则投影

公开坐标 3/6。 围绕“怎样区分盒投影、alpha轮廓投影、滤镜、背景模糊和伪元素层，并控制合成成本？”，条目3把16 不规则投影解释为选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层；复核者先读取输入图像、阴影参数、滤镜序列、堆叠上下文和合成成本再判断截图，不能接受大范围滤镜牺牲可读性与性能。

17 染色效果

公开坐标 4/6。 对“第 4 章视觉效果”而言，17 染色效果的最小合同是选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层，第4次检查保存输入图像、阴影参数、滤镜序列、堆叠上下文和合成成本；若产生大范围滤镜牺牲可读性与性能，就回到声明、层叠或布局上游。

18 毛玻璃效果

公开坐标 5/6。 第5个公开目录坐标18 毛玻璃效果服务于覆盖单侧与不规则投影、染色、毛玻璃和折角效果，需要以输入图像、阴影参数、滤镜序列、堆叠上下文和合成成本呈现选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层；大范围滤镜牺牲可读性与性能会破坏“效果作用对象、滤镜输入、模糊采样区、堆叠上下文、回退和性能边界明确”。

19 折角效果

公开坐标 6/6。 学习者在“第 4 章视觉效果”中讨论19 折角效果前预测选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层会改变哪项值或像素状态，再读取输入图像、阴影参数、滤镜序列、堆叠上下文和合成成本；观察到大范围滤镜牺牲可读性与性能时保留失败轨迹。

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

分步1 / 3

1. 声明与渲染探针

切换“不规则投影、毛玻璃、染色”并一次只调整一个控制量，核对声明、回退和实际绘制怎样连接“第 4 章视觉效果”。

声明与渲染探针

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

怎样区分盒投影、alpha轮廓投影、滤镜、背景模糊和伪元素层，并控制合成成本？

单一控制量：50filter: drop-shadow(...)

基线：box-shadow矩形投影

沿元素alpha轮廓生成投影

不规则投影

本页目录坐标：第4章视觉效果、15 单侧投影、16 不规则投影、17 染色效果、18 毛玻璃效果、19 折角效果

第 4 章视觉效果的可重放CSS协议

阶段	CSS动作	必留证据	拒绝条件
选择投影或滤镜输入	在“第 4 章视觉效果”执行选择投影或滤镜输入，一次只改变一个声明或环境条件	DOM、浏览器基线、视口、字体与初始样式	语义或依赖不可追溯
建立伪元素和堆叠层	在“第 4 章视觉效果”执行建立伪元素和堆叠层，一次只改变一个声明或环境条件	层叠来源、computed style、布局盒与绘制截图	对整页内容使用大半径blur并持续动画，造成文字不可读、离屏缓冲放大和滚动掉帧
检查模糊边缘性能与回退	在“第 4 章视觉效果”执行检查模糊边缘性能与回退，一次只改变一个声明或环境条件	回退、输入、偏好、性能与现代边界记录	无法重放或恢复基础样式

unit: "csec-unit-04"
question: "怎样区分盒投影、alpha轮廓投影、滤镜、背景模糊和伪元素层，并控制合成成本？"
scenario: "为弹层制作不规则投影、染色封面、毛玻璃背景和折角提示，分别记录合成层与可读性。"
recipes: ["不规则投影", "毛玻璃", "染色"]
stages: ["选择投影或滤镜输入", "建立伪元素和堆叠层", "检查模糊边缘性能与回退"]
invariant: "效果作用对象、滤镜输入、模糊采样区、堆叠上下文、回退和性能边界明确"
fault: "对整页内容使用大半径blur并持续动画，造成文字不可读、离屏缓冲放大和滚动掉帧"
evidence: "效果输入、box-shadow或drop-shadow参数、滤镜序列、伪元素层、backdrop范围、对比度、合成性能和回退截图。"
reset: restore_recipe_value_trace_step_gates_and_artifact

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

本页回顾

掌握“第 4 章视觉效果”不是背诵代码片段，而是能围绕“怎样区分盒投影、alpha轮廓投影、滤镜、背景模糊和伪元素层，并控制合成成本？”重建值处理与绘制路径，并用“效果作用对象、滤镜输入、模糊采样区、堆叠上下文、回退和性能边界明确”拒绝“对整页内容使用大半径blur并持续动画，造成文字不可读、离屏缓冲放大和滚动掉帧”。最终交付为效果输入、box-shadow或drop-shadow参数、滤镜序列、伪元素层、backdrop范围、对比度、合成性能和回退截图。

练习与答案

练习

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

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

“第 4 章视觉效果”的第4章视觉效果：以“封闭本章问题类型、规范机制与回退证据”解释CSS作用，用“目录坐标、编号技巧、相邻章节和发布结论”提供复核。
“第 4 章视觉效果”的15 单侧投影：以“选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层”解释CSS作用，用“输入图像、阴影参数、滤镜序列、堆叠上下文和合成成本”提供复核。
“第 4 章视觉效果”的16 不规则投影：以“选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层”解释CSS作用，用“输入图像、阴影参数、滤镜序列、堆叠上下文和合成成本”提供复核。
“第 4 章视觉效果”的17 染色效果：以“选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层”解释CSS作用，用“输入图像、阴影参数、滤镜序列、堆叠上下文和合成成本”提供复核。
“第 4 章视觉效果”的18 毛玻璃效果：以“选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层”解释CSS作用，用“输入图像、阴影参数、滤镜序列、堆叠上下文和合成成本”提供复核。
“第 4 章视觉效果”的19 折角效果：以“选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层”解释CSS作用，用“输入图像、阴影参数、滤镜序列、堆叠上下文和合成成本”提供复核。

问题 3：反例恢复。 怎样证明“对整页内容使用大半径blur并持续动画，造成文字不可读、离屏缓冲放大和滚动掉帧”已经被修正？

为“第 4 章视觉效果”复用同一DOM、浏览器、视口、字体、输入和偏好，重放正常路径后只注入“对整页内容使用大半径blur并持续动画，造成文字不可读、离屏缓冲放大和滚动掉帧”；记录最早偏离点，撤销故障并再次运行。只有渲染探针、值处理轨迹、发布门和效果输入、box-shadow或drop-shadow参数、滤镜序列、伪元素层、backdrop范围、对比度、合成性能和回退截图。重新满足“效果作用对象、滤镜输入、模糊采样区、堆叠上下文、回退和性能边界明确”，修正才可提交。

名词解释

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

视觉效果: 对应“第4章视觉效果”；在“第 4 章视觉效果”中用于封闭本章问题类型、规范机制与回退证据，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
单侧投影: 对应“15 单侧投影”；在“第 4 章视觉效果”中用于选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
不规则投影: 对应“16 不规则投影”；在“第 4 章视觉效果”中用于选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
染色效果: 对应“17 染色效果”；在“第 4 章视觉效果”中用于选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
毛玻璃效果: 对应“18 毛玻璃效果”；在“第 4 章视觉效果”中用于选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
折角效果: 对应“19 折角效果”；在“第 4 章视觉效果”中用于选择盒、alpha轮廓、滤镜输入或伪元素合成视觉层，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。

第 4 章 视觉效果

学习目标

为什么从这个CSS问题开始

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

公开目录坐标与CSS机制

第4章 视觉效果

15 单侧投影

16 不规则投影

17 染色效果

18 毛玻璃效果

19 折角效果

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

1. 声明与渲染探针

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

第 4 章 视觉效果的可重放CSS协议

本页回顾

练习与答案

练习

名词解释

名词解释

讨论

第 4 章视觉效果

第4章视觉效果

第 4 章视觉效果的可重放CSS协议