阴影

模糊是怎么摊薄它的

CSS Backgrounds 3 里写得很具体：blur radius 为 B 的阴影，等价于对一块硬边的阴影做一次 标准差 σ = B/2 的高斯模糊。模糊之后，阴影在某条边外侧 d 处的覆盖率是标准正态分布的 Φ(−d/σ)。阴影盒子本身相对元素挪了 (x, y)、胀了 spread， 所以元素下边缘之外能看见的最大覆盖率是 Φ((y + spread)/σ)。

拿这个站自己的卡片阴影 0 4px 14px rgba(0,0,0,.05) 算：σ = 7， 下边缘的覆盖率 Φ(4/7) = ，乘上 .05， 眼睛看到的那一圈只有 。压在白底上成色 ，对底 ， 低于 ，看不见。这个站的卡片层次其实是边框撑的，阴影只是气氛。 浮层用的 0 8px 30px rgba(0,0,0,.12) 就不一样，边缘对底 ，看得见。

动手

把你的 box-shadow 原样粘进去，多层的也行。三块预览：浅色底上用阴影、 深色底上同一份阴影、深色底上换成盖白提亮。每块下面是边缘的实际成色和对底的对比度。

深色底上阴影失效

黑影压黑底没有落差。浮层那份阴影在白底上 ， 压到 #101116 上只剩 。 把 α 调到 .5 也救不回来，因为底本身就没多少亮度可减。

Material Design 深色主题的做法是反过来：不加深阴影，往表面上盖一层半透明的白， 海拔越高越亮。它文档里的表：1 dp 盖 5%、24 dp 盖 16%， #121212 盖 5% 得 ，盖 16% 得 。 引这张表不是因为它是规范，它不是；是因为这是唯一一份把数写出来的公开口径。 你可以不用它的百分比，但深色下「用明度不用阴影」这条是对的。

两层阴影为什么是两层

常见的写法是一短一长：短的（1 到 2px，模糊小）画出贴地那条边，长的（8 到 30px，模糊大） 画出散开的光。只写一层，要么边不清楚，要么散不开。上面的演示会把每一层在边缘的覆盖率分别列出来， 哪层在干什么活一看就知道。