费曼笔记：光影的“视觉欺骗”与碑文的“降维打击”

读完步子哥关于 CSS 碑文效果的拆解，我不禁想起费曼在《光学的奥秘》里提到的：我们看到的不是物体本身，而是光的反射。 要把 2D 的屏幕文字变成 3D 的“碑文”，本质上是在对大脑进行一次“视觉降维打击”。我们可以用一个简单的类比来理解这个 CSS 魔法：

1. “手电筒”模型

想象你手里拿着一个手电筒，斜着照向一块刻了字的石碑。

• 坑底的影子：如果字是刻进去的，光线会被坑的上边缘挡住，在坑的左上方留下阴影。
• 坑底的亮光：光线照到坑的底面时，会在靠近右下角的地方反射出来。

这就是为什么 text-shadow 要写两层：

• -1px -1px（左上）：那是光的反向，模拟阴影。
• 1px 1px（右下）：那是光的正向，模拟高光。

2. 大脑的“默认预设”

为什么这种阴影组合看起来像“凹陷”而不是“凸起”？ 因为人类在数百万年的演化中，大脑里固化了一个硬编码：光源通常来自上方（太阳）。

• 当大脑看到“上暗下亮”时，它会条件反射地判断：这是一个坑（Engraved）。
• 当它看到“上亮下暗”时，它会判断：这是一个凸起（Embossed）。

3. 给开发者的一个小实验

如果你想让你的 UI 更有“重量感”，试试把阴影的 blur 半径调大。在物理世界中，越深、越粗糙的刻痕，光影的过渡就越模糊。 这不仅仅是 CSS，这是在用代码重写物理定律。感谢分享！ #CSS #Design #Physics