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

发布于 2024-10-01 21:38:45 字数 535 浏览 4 评论 0 原文

我发现 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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

痴梦一场 2024-10-08 21:38:45

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

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

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

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

铁憨憨 2024-10-08 21:38:45

我不是一个 Web/CSS 程序员,但我需要一个看起来像 CSS 的盒子阴影算法,并决定找出它是如何工作的。

我使用 CSSmatic 的在线 box-shadow 工具进行下面的比较。

该算法似乎有 2 个步骤。

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

如图所示,27px CSS spread inset 表示形状是缩放至尺寸 27*2 像素更小。对于轮廓框阴影来说,这是相反的(例如27*2像素更大)。

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

第 2 步:高斯模糊

历史

Mozilla 开发人员 David Baron 在 此处撰写了一篇有关 CSS box-shadow 实现的详细文章< /a>.

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

不同的浏览器......历史上做过不同的事情
对于相同的模糊半径,无论是模糊算法还是什么
该算法的半径意味着(即给定半径的模糊程度)
制造东西)。 ....在过去的一年里,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 中的高斯半径

< img src="https://i.sstatic.net/EmerP.png" height="300" title="7px CSS 模糊 (Firefox 50)">

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 分享了一些 快速高斯模糊算法

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 27px CSS spread inset means the shape is scaled to have dimensions 27*2 pixels smaller. This is inverted for outline box-shadows (e.g. 27*2 pixels 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:

Different browsers ... have historically done different things
for the same blur radius, both in terms of blurring algorithm and what
the radius means for that algorithm (i.e., how blurry a given radius
makes things). .... Over the past year, the CSS and HTML specifications
have changed (for CSS) to define what this blur radius means or (for
HTML) so that they agree with each other on this definition.

Those historic differences could explain the purpose of the moz- prefix (which you mentioned) and webkit- 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:

The blur effect is now defined by css3-background and by HTML to be a
Gaussian blur with the standard deviation (σ) equal to half the given blur radius, with allowance for reasonable approximation error.

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):

7px CSS blur (Firefox 50) ~~ ceil(7 * 5/3.0) = 12.0 Gaussian radius in GIMP


30px CSS blur (Firefox 50) ~~ ceil(30 * 5/3.0) = 50.0 Gaussian radius in GIMP


75px CSS blur (Firefox 50) ~~ ceil(75 * 5/3.0) = 125.0 Gaussian radius in GIMP


Implementation

Ivan Kuckir shares some fast Gaussian blur algorithms.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文