好吧,假设框阴影以一个框开始,与内容大小相同,具有指定的阴影颜色(为了论证,假设为黑色)。

两个 距离

传播 值将导致此框按指定的数量展开-因此 更大的 较小 而不是它的内容框。从视觉上看,扩散越高,阴影出现的距离越远(这给人一种错觉,盒子离投射阴影的表面有很长的距离)。

模糊值只是使边缘平滑地模糊到背景中,从阴影颜色淡入背景颜色。

HTH公司

我不是一个web/CSS程序员,但我需要一个类似CSS的框影算法,并决定找出它是如何工作的。

online box-shadow tool 用于下面的比较。

步骤1:矢量化缩放和平移

如图所示,a 27px 插图 27*2 像素 较小 27*2 更大的

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

第二步:高斯模糊

历史

Mozilla开发人员davidbaron写了一篇关于cssboxshadow实现的详细文章 here

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

不同的浏览器。。。历史上做过不同的事情 对于相同的模糊半径,无论是在模糊算法方面还是在什么方面 半径对于该算法意味着(即给定半径的模糊程度) 制造东西)。。。。在过去的一年里,CSS和HTML规范 已更改(对于CSS)以定义此模糊半径的含义或(对于 所以他们在这个定义上是一致的。

这些历史性的差异可以解释这次会议的目的 moz- 前缀(你提到的)和 webkit- 前缀。这些可能指定Mozilla和 WebKit -基于浏览器使用。

由于标准化的原因,我预计这些带前缀的版本现在会被弃用,但可能会用于与旧浏览器的兼容性。

据男爵说,现在有一个 精确、标准定义

模糊效果现在由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 ceil(30 * 5/3.0) = 50.0 GIMP中的高斯半径

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

实施

fast Gaussian blur algorithms .