CSS中box-shadow和-moz-box-shadow的准确解释是什么?

nop*_*ole 5 css shadow dropshadow

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

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

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

第四长度是展开距离。正值会使阴影形状向所有方向扩展指定的半径。负值会导致阴影形状收缩。

第四个长度是否会使用相同的颜色(最暗的阴影),并重复指定的宽度?那么它不会顺利模糊吗?

它可以实现指定模糊率或淡出率吗...?

有人非常清楚地知道它们到底是如何工作的吗?

Kei*_*ams 4

好吧,想象一下盒子阴影开始时是一个盒子,大小与内容相同,具有指定的阴影颜色(为了论证,假设为黑色)。

这个盒子一开始的大小和形状与内容相同,就在内容的后面——所以本质上是不可见的。

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

扩展值将导致此扩展指定的量 - 因此它将大于小于内容框。从视觉上看,散布越高,阴影显得越“靠后”(它给人一种错觉,即盒子距离它投射阴影的表面很远)。

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

华泰