错觉页面：www.hpleapfrog.cn/lab/illusions/
先看页面再读这篇，效果更好。因为下面所有的”实测数据”，页面上都当场算给你看。
一个前提：你的眼睛不是测量仪
我们习惯把视觉当成”拍照” —— 光进来了，图像就成了。
实际不是。视网膜拿到的信号又少又脏，大脑必须猜。它猜得很准，所以平时你察觉不到；但只要给它一点有歧义的输入，它猜错的样子就会暴露出来。
这也是错觉有意思的地方：它不是视力问题，是推理问题。
而且——这是关键——知道原理并不会让错觉消失。你现在知道那两条线一样长，可再看一眼，它还是会显得不一样长。这说明它发生在你无法访问的那一层。
一、这些横线是弯的吗？—— 咖啡墙错觉
看那条”砖墙”。行与行之间的灰缝，看起来在左右倾斜，甚至上下分开。
它们是严格水平的。
这个错觉的机制挺有意思：你的视觉系统里有一批边缘定向神经元——有的专门响应水平边缘，有的响应倾斜边缘。当砖块错开半格、中间的缝又是灰色（不是黑或白）时，局部的亮度对比会同时激活”水平”和”倾斜”两类神经元，加权之后，你得到一条看起来是斜的直线。
揭穿数据（页面实测）：
实测 12 行的几何：
行高 全部 19px（一致）
行间距 恒为 19px（等差，无偏移）
每行顶边 严格水平 —— 倾斜是错觉
有意思的是这个错觉的传说：它常被说成”咖啡馆瓷砖缝里有灰尘，所以看起来歪”。但那其实是个误传 —— 错觉本身不需要灰尘。灰色缝就够了。
二、两个方块，哪块更浅？—— 同时对比
左边那块看起来明显更亮。它们颜色完全一样。
你的视觉系统几乎不测绝对亮度 —— 它测的是与周围的差。同一个灰色，放在深背景上被判为”亮”，放在浅背景上被判为”暗”。
这其实是个非常合理的设计：真实世界里，光照条件变化极大（阴影里、阳光下），物体的绝对像素值毫无意义，只有相对关系稳定。所以大脑干脆丢掉绝对值。
代价就是：一旦背景被人为操纵，判断立刻崩掉。
揭穿数据：
getComputedStyle 读出的真实颜色：
左侧方块 rgb(138, 138, 138)
右侧方块 rgb(138, 138, 138)
→ 完全相同。差异 100% 来自背景。
三、两条横线，哪条更长？—— 缪勒-莱尔错觉
上面那条看起来长得多。
两条一样长。 箭头方向改变了你感知到的范围：向外的箭头把线段”延伸”进周围空间，向内的箭头让它”收缩”。
这个错觉有个比较站得住的解释：大脑用物体的整体范围来估算尺寸，而不是用线段的端点。这跟你在现实中看到的”墙角”和”箭头”是同一套推理 —— 只不过用在了不该用的地方。
揭穿数据：
两条线段的实测宽度：
上条 240px
下条 240px
→ 完全相等。长度差是错觉。
四、两个中心圆，哪个更大？—— 艾宾浩斯错觉
右边那个中心圆看起来小一圈。
直径完全相同，都是 66px。 周围圆的大小改变了参照系。
这个错觉背后有一段比教科书版本乱得多的科学史，值得单独讲 —— 它也是个关于「别急着相信漂亮结论」的好例子。
1995 年，Aglioti 等人做了个很漂亮的研究：他们做了个立体的艾宾浩斯错觉，让受试者去抓中间那个圆盘。结果发现 —— 口头估计大小被错觉骗了（约 10%），但手的开口大小几乎不受影响（约 6%，远小于感知偏差）。
结论很诱人：「眼睛被骗了，手没有。」 这被当作 Goodale & Milner「双视觉通路」理论的明星证据 —— 一条通路负责识别（会被骗），另一条负责动作（不会）。这个说法进了无数教材和科普。
然后它没被复现住。
- Franz & Gegenfurtner（2008）：汇总相关研究，发现抓握一致地受错觉影响，没有出现分离。
- Kopiske 等（2016）：四个实验室联合做精确复现，总样本 N = 144，并专门设置了能区分「错觉」和「避障」两种解释的条件。结论是 —— 抓握确实被艾宾浩斯错觉影响，而且这个影响不能用避障来解释。
到 2026 年，双视觉通路假说仍在争论中，而”手不会被骗”这个说法，已经没有当年那么硬了。
我原本想在这里写”手是准的，眼睛是错的” —— 那是个干净、好记、也符合直觉的句子。但核对文献之后发现：它被大样本复现研究推翻了。
所以准确的说法是：有一个著名实验曾支持”动作不受错觉影响”，但后续复现失败了。
这比原来的版本有价值 —— 它说明“有个著名实验支持”和”这是事实”是两件事，中间隔着复现。
揭穿数据：
两个中心圆的实测直径：
左（周围 8 个小圆） 66px
右（周围 8 个大圆） 66px
→ 完全相等。大小差是错觉。
五、铁轨上这两根横杆，一样长吗？—— 庞佐错觉
上面那根明显更长。
一样长（都是 172.8px）。 两条汇聚的斜线制造了”纵深”——大脑按透视规则推算：”远处的物体还能占这么大面积，说明它本来很大”，于是把上方的横杆”放大”了。
这个错觉最能说明问题：你的大脑在用一个三维世界的模型，去解释一张二维图片。 大多数时候这是好事（它让你能在真实世界里判断距离），但在纸上就成了 bug。
揭穿数据：
两根横杆的实测宽度：
远处（上） 172.8px
近处（下） 172.8px
→ 完全相等。纵深感是错觉。
六、中间那个方块，你看到了吗？—— 卡尼萨方块
你会看到一个白色方块浮在中间，边缘清晰，甚至像比四周更亮。
它根本不存在。 画面里只有四个缺了四分之一的黑圆。
你的视觉系统主动补全了缺失的边界，还给它生成了一个”表面”—— 这叫主观轮廓。而且这个补出来的方块是模态的：它不像”我知道那里有个东西”，而像”我真的看见了它”。你没法选择不看见。
揭穿数据（这个最有说服力）：
对"方块"中心区做几何包含判定：
容器内实体元素数 4（四个缺角黑圆）
覆盖中心点的实体元素数 0
→ 中心区没有任何实体元素占位，那个"方块"是大脑补出来的。
一个像素都没有。
为什么这些错觉不会因为”知道”就消失
这点我认为最值得记住。
你现在已经知道：咖啡墙的线是直的、两块灰是一样深的、三条线段一样长。但再看一眼，它们还是会显得不一样。
原因：错觉发生在低级视觉处理阶段 —— 边缘检测、对比度归一化、深度线索推断。这些过程速度快、不可访问，而且在你的意识拿到结果之前就已经完成了。
你的”知道”是高级认知的结论，它拿不到低级处理的输出。所以它能让你报告正确，却改不了看到什么。
这其实是个很好的提醒：“我清楚地看到” 和 “事实如此”，是两件事。 前者只说明你的视觉系统给出了一个自信的答案。
我是怎么做这个页面的
六个错觉全部用纯 CSS 画，没有一个图片、没有 Canvas、没有第三方库。这样做有个好处：每个错觉的”欺骗手法”都能在源码里读出来。
“揭穿”按钮做的是同一件事：把测量结果翻出来给你看。三条做法：
- 读真实计算值 —— 用
getComputedStyle读出两个方块的实际背景色（rgb(138,138,138)vsrgb(138,138,138)） - 量真实几何 —— 用
getBoundingClientRect量三条线段的宽度（240pxvs240px） - 叠上基准层 —— 在”斜线”上画一条笔直的红色虚线；给不存在的方块描个轮廓
第 3 条最直接：它不解释，它让你自己看。
（源码在 static/lab/illusions/index.html，纯原生 JS，可以直接读。）
顺带说个技术坑
做第 6 个揭穿时，我一开始想用 elementFromPoint() 去”点”那个方块的中心，看命中的是哪个元素 —— 如果没元素，就证明它不存在。
结果返回 null。 差点被我当成”证明成功”。
其实原因是：elementFromPoint 只对视口内的元素有效。那个方块当时在视口外面，所以它返回 null —— 这个 null 什么也没证明。
改用几何包含判定（检查有没有任何子元素矩形覆盖中心点）才得到可信结论：
覆盖中心点的实体元素数 = 0
这又是一次”测量口径错了，但看起来像结论”。 和这个博客里 另一篇 讲的是同一件事。
最后
如果你只想从这篇带走一句话：
你的感知不是”读取”，是”生成”。 它生成得足够好，好到你以为那是读数；但它终究是推测，而推测会有偏好，也会有失误。
知道这一点之后，你可能还是会继续被骗 —— 但至少你会知道，“我看到”比”我知道”要弱。