CSS中box-shadow和-moz-box-shadow的精确解释是什么？

Question

我发现CSS的box-shadow和-moz-box-shadown的解释有点不精确。

http://www.w3.org/TR/2010/WD-css3-background-20100612/#the-box-shadow

  

第三个长度是模糊距离。   不允许使用负值。如果   模糊值为零，阴影   边缘很尖锐。否则，越大   值，阴影的边缘越多   很模糊。

     

第四个   长度是一个传播距离。正   值导致阴影形状   由...扩展到各个方向   指定半径。负值   导致阴影形状收缩。

第四个长度是否会使用相同的颜色（最暗的阴影），并重复指定的宽度？那么它会不会顺利模糊出来？

它能否实现指定模糊率或淡出率......？

有人确切地知道他们究竟是如何工作的吗？

Answer 1

好吧，想象一下盒子阴影是从一个盒子开始的，与指定阴影颜色的内容大小相同（为了参数而说是黑色）。

这个盒子的内容与内容的大小和形状相同，就在它后面 - 所以，基本上是不可见的。

两个距离值将向上，向下，向左或向右移动 - 以便它将从内容后面“窥视”。此时，它仍然是一个与其内容大小相同的盒子，并且会有锋利的边缘。

传播值会导致此框展开指定的数量 - 因此它将比其内容框更大或更小。在视觉上，传播越高，阴影出现的“后退”就越多（它给人的幻觉是盒子离表面很远，它正在投射阴影）。

模糊值只会使边缘平滑地模糊到背景中，从阴影颜色渐变为背景颜色。

HTH

Answer 2

我不是网络/ CSS程序员，但我需要一个看起来像CSS的盒子阴影算法，并决定了解它是如何工作的。

我使用CSSmatic的online box-shadow tool进行比较。

该算法似乎有两个步骤。

第1步：矢量化比例和移位

如图所示，27px CSS传播插入意味着缩放形状以使尺寸27*2像素更小。对于轮廓框阴影（例如27*2像素较大），它会反转。

水平/垂直偏移是不言自明的。

第2步：高斯模糊

历史

Mozilla开发人员David Baron写了一篇关于CSS box-shadow implementation here的详细文章。

直到2011年，CSS模糊半径没有标准含义。它可以对应于不同Web浏览器中的不同算法和参数：

  

不同的浏览器......历来做了不同的事情   对于相同的模糊半径，无论是模糊算法还是什么   半径意味着该算法（即给定半径的模糊程度）   制作东西）。 ....过去一年，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模糊（Firefox 50）~~ ceil(7 * 5/3.0) = 12.0 GIMP中的高斯半径

30px CSS模糊（Firefox 50）~~ ceil(30 * 5/3.0) = 50.0 GIMP中的高斯半径

75px CSS模糊（Firefox 50）~~ ceil(75 * 5/3.0) = 125.0 GIMP中的高斯半径

实施

Ivan Kuckir分享了一些fast Gaussian blur algorithms。