我发现 CSS 的 box-shadow 和 -moz-box-shadown 的解释有些不精确。
http://www.w3.org /TR/2010/WD-css3-background-20100612/#the-box-shadow
第三个长度是模糊距离。
不允许使用负值。如果
模糊值为零，阴影的
边缘锋利。否则，较大的
值越大，阴影边缘越多
模糊了。
第四个
length 是传播距离。积极的
值导致阴影形状
向各个方向扩展
指定半径。负值
导致阴影形状收缩。
第四个长度是否会使用相同的颜色（最暗的阴影），并重复指定的宽度？那么它不会顺利模糊吗？
它可以实现指定模糊率或淡出率吗...？
有人非常清楚地知道它们到底是如何工作的吗？
I find the explanations of CSS's box-shadow and -moz-box-shadown somewhat imprecise.
http://www.w3.org/TR/2010/WD-css3-background-20100612/#the-box-shadow
The third length is a blur distance.
Negative values are not allowed. If
the blur value is zero, the shadow's
edge is sharp. Otherwise, the larger
the value, the more the shadow's edge
is blurred.
The fourth
length is a spread distance. Positive
values cause the shadow shape to
expand in all directions by the
specified radius. Negative values
cause the shadow shape to contract.
Is it true that the fourth length will use the same color (the darkest shade), and repeat that for the specified width? So it won't be smoothly blurring out?
Can it achieving specifying the rate of blurring or the rate of fading out...?
Does someone know very precisely how they exactly work?
发布评论
评论（2）
好吧，想象一下盒子阴影开始时是一个盒子，大小与内容相同，具有指定的阴影颜色（为了论证，假设为黑色）。
这个盒子一开始的大小和形状与内容相同，就在内容的后面——所以本质上是不可见的。
两个距离值会将其向上、向下、向左或向右移动，以便它从内容后面“窥视”出来。此时，它仍然是一个与其内容相同大小的盒子，并且具有锋利的边缘。
spread 值将导致此框扩展指定的量 - 因此它将比其内容框更大或更小。从视觉上看，散布越高，阴影显得越“靠后”（它给人一种错觉，即盒子距离它投射阴影的表面很远）。
模糊值只会使边缘平滑地模糊到背景中，从阴影颜色淡入背景颜色。
华泰
Well, imagine that the box shadow starts as a box, the same size as the content, of the specified shadow colour (say black for argument's sake).
This box starts life the same size and shape as the content, and right behind it - so, essentially, invisible.
The two distance values will shift it up, down, left or right - so that it will "peek" out from behind the content. At this point, it will still be a box of the same size as its content, and will have sharp edges.
The spread value will cause this box to expand by the specified amount - so it will be bigger or smaller than its content box. Visually, the higher the spread, the further "back" the shadow appears (it gives the illusion that the box is a long way away from the surface that it's casting its shadow on).
The blur value simply causes the edges to blur smoothly into the background, fading from the shadow colour to the background colour.
HTH
我不是一个 Web/CSS 程序员，但我需要一个看起来像 CSS 的盒子阴影算法，并决定找出它是如何工作的。
我使用 CSSmatic 的在线 box-shadow 工具进行下面的比较。
该算法似乎有 2 个步骤。
步骤 1：矢量化缩放和平移
如图所示，
27pxCSS spread inset 表示形状是缩放至尺寸27*2像素更小。对于轮廓框阴影来说，这是相反的（例如27*2像素更大）。水平/垂直偏移是不言自明的。
第 2 步：高斯模糊
历史
Mozilla 开发人员 David Baron 在 此处撰写了一篇有关 CSS box-shadow 实现的详细文章< /a>.
直到 2011 年，CSS 模糊半径还没有标准含义。它可以对应不同网络浏览器中的不同算法和参数：
这些历史差异可以解释
moz-前缀（您提到的）和webkit-前缀的用途。这些可能为 Mozilla 和 WebKit 指定替代 box-shadow 参数基于的浏览器来使用。我预计由于标准化，这些带前缀的版本现在已被弃用，但可以用于与旧版浏览器兼容。
标准化
根据 Baron 的说法，现在盒子阴影模糊半径有一个精确的标准定义：
数学家可以将其扩展为精确的公式。
视觉近似
通过 GIMP 中的一些试验和错误，我发现通过乘以CSS 模糊参数按 5/3 (1.6666...)，然后向上舍入到最接近的整数，产生非常接近的视觉近似值（Firefox 50 中的 CSS）：
7pxCSS 模糊 (Firefox 50) ~~ceil(7 * 5/3.0) = 12.0GIMP 中的高斯半径< img src="https://i.sstatic.net/EmerP.png" height="300" title="7px CSS 模糊 (Firefox 50)">
30pxCSS 模糊 (Firefox 50) ~~ceil(30 * 5/3.0) = 50.0GIMP 中的高斯半径75pxCSS 模糊 (Firefox 50) ~~ceil(75 * 5/3.0) = 125.0GIMP 中的高斯半径实现
Ivan Kuckir 分享了一些 快速高斯模糊算法。
I'm not a web/CSS programmer, but I needed a box-shadow algorithm that looked like CSS's, and decided to find out how it works.
I used CSSmatic's online box-shadow tool for the comparisons below.
The algorithm seems to have 2 steps.
Step 1: Vectorized scale and shift
As shown, a
27pxCSS spread inset means the shape is scaled to have dimensions27*2pixels smaller. This is inverted for outline box-shadows (e.g.27*2pixels larger).The horizontal/vertical offsets are self-explanatory.
Step 2: Gaussian blur
History
Mozilla developer David Baron wrote a detailed article on CSS box-shadow implementations here.
Up until 2011, there was no standard meaning for the CSS blur radius. It could correspond to different algorithms and parameters in different web browsers:
Those historic differences could explain the purpose of the
moz-prefix (which you mentioned) andwebkit-prefix. These likely specify alternative box-shadow parameters for Mozilla and WebKit-based browsers to use.I expect these prefixed versions are now deprecated, due to standardization, but may be used for compatibility with older browsers.
Standardization
According to Baron there is now a precise, standard definition of the box-shadow blur radius:
A mathematician could expand that into an exact formula.
Visual approximation
With some trial-and-error in GIMP, I found that a Gaussian blur radius obtained by multiplying the CSS blur parameter by 5/3 (1.6666...), then rounding up to the nearest integer, produces a very close visual approximation (to CSS in Firefox 50):
7pxCSS blur (Firefox 50) ~~ceil(7 * 5/3.0) = 12.0Gaussian radius in GIMP30pxCSS blur (Firefox 50) ~~ceil(30 * 5/3.0) = 50.0Gaussian radius in GIMP75pxCSS blur (Firefox 50) ~~ceil(75 * 5/3.0) = 125.0Gaussian radius in GIMPImplementation
Ivan Kuckir shares some fast Gaussian blur algorithms.