我发现 CSS 的 box-shadow 和 -moz-box-shadown 的解释有些不准确。
http://www.w3.org/TR/2010/WD-css3-background-20100612/#the-box-shadow
第三个长度是模糊距离。 不允许使用负值。如果 模糊值为零，阴影的 边缘锋利。否则越大 值，阴影的边缘越多 是模糊的。
第四个 长度是传播距离。积极的 值导致阴影形状 向各个方向扩展 指定半径。负值 导致阴影形状收缩。
第四个长度是否会使用相同的颜色（最暗的阴影），并针对指定的宽度重复此操作？所以它不会平滑模糊？
能否实现指定模糊率或淡出率...？
有人非常准确地知道他们的工作原理吗？
【问题讨论】：
标签： shadow dropshadow css
我不是网络/CSS 程序员，但我需要一个看起来像 CSS 的 box-shadow 算法，并决定了解它是如何工作的。
我使用 CSSmatic 的 online box-shadow tool 进行下面的比较。
该算法似乎有 2 个步骤。
如图所示，27px CSS 展开 inset 表示将形状缩放为尺寸为27*2 像素更小。这与轮廓框阴影相反（例如27*2 像素更大）。
水平/垂直偏移是不言自明的。
Mozilla 开发人员 David Baron 写了一篇关于 CSS box-shadow 实现的详细文章here。
直到 2011 年，CSS 模糊半径还没有标准含义。可以对应不同浏览器的不同算法和参数：
不同的浏览器...历史上做过不同的事情 对于相同的模糊半径，无论是在模糊算法方面还是在什么方面 该算法的半径意味着（即，给定半径的模糊程度 做东西）。 .... 在过去的一年中，CSS 和 HTML 规范 已更改（对于 CSS）以定义此模糊半径的含义或（对于 HTML) 以便他们在此定义上达成一致。
这些历史差异可以解释 moz- 前缀（您提到的）和 webkit- 前缀的用途。这些可能会为 Mozilla 和基于 WebKit 的浏览器指定要使用的替代 box-shadow 参数。
由于标准化，我希望这些前缀版本现在已弃用，但可能用于与旧浏览器的兼容性。
根据 Baron 的说法，现在有一个 精确、标准的定义盒阴影模糊半径：
模糊效果现在由 css3-background 和 HTML 定义为 高斯模糊，标准偏差 (σ) 等于 一半 给定模糊半径，允许合理的近似误差。
数学家可以将其扩展为精确的公式。
在GIMP 中反复试验后，我发现通过将 CSS 模糊参数乘以 5/3（1.6666...），然后四舍五入到最接近的整数获得的高斯模糊半径会产生一个非常接近视觉近似（在 Firefox 50 中的 CSS）：
7px CSS blur (Firefox 50) ~~ ceil(7 * 5/3.0) = 12.0 GIMP 中的高斯半径
30px CSS blur (Firefox 50) ~~ ceil(30 * 5/3.0) = 50.0 GIMP 中的高斯半径
75px CSS blur (Firefox 50) ~~ ceil(75 * 5/3.0) = 125.0 GIMP 中的高斯半径
Ivan Kuckir 分享了一些 fast Gaussian blur algorithms.
【讨论】：
好吧，假设盒子阴影从一个盒子开始，与内容的大小相同，具有指定的阴影颜色（为了参数而说是黑色）。
这个盒子一开始就和内容一样大小和形状，就在它后面——所以，本质上是不可见的。
两个 distance 值会将其向上、向下、向左或向右移动 - 这样它就会从内容后面“窥视”出来。此时，它仍将是一个与其内容大小相同的盒子，并且具有锐利的边缘。
spread 值将导致此框按指定的量扩展 - 因此它将比其内容框更大或更小。从视觉上看，散布越高，阴影出现的“后部”越远（它给人的错觉是盒子离它正在投射阴影的表面很远）。
模糊值只是使边缘平滑地模糊到背景中，从阴影颜色淡入背景颜色。
HTH
【讨论】：