What is the exact explanation of box-shadow and -moz-box-shadow in CSS?

Question

I find the CSS box-shadow and -moz-box-shadown somewhat inaccurate.

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

The third length is blur. Negative values ​​are not allowed. If the blur value is zero, the shadow edge is sharp. Otherwise, the larger the value, the more the edge of the shadow is blurred.

The fourth length is the propagation distance. Positive values ​​cause the shape of the shadow to expand in all directions to the specified radius. Negative values ​​cause the shadow shape to shrink.

Is it true that the fourth length will use the same color (the darkest shade) and repeat this for the specified width? So it won't blur smoothly?

Is it possible to determine the blur rate or the attenuation rate ...?

Does anyone know exactly how they work?

Answer 1

So, imagine that the window shadow begins as a field, the same size as the contents of the specified shadow color (for example, black for the argument).

This box starts life the same size and shape as the content, and right behind it - so, in fact, invisible.

Two distance values ​​move it up, down, left or right - so that it “peeks” because of the contents. At this point, it will still have a box the same size as its contents, and will have sharp edges.

The distribution value will cause this flag to expand by the specified number, so it will be more or less than its contents. Visually, the higher the spread, the farther the shadow appears “backward” (this gives the illusion that the box is far from the surface on which it casts its shadow).

The blur value simply makes the edges blur smoothly in the background, disappearing from the shadow color to the background color.

NTN

Answer 2

I'm not a network / CSS programmer, but I need a box-shadow algorithm similar to CSS and decided to find out how it works.

I used the CSSmatic online shadow tool to compare below.

It seems that the algorithm has 2 steps.

Step 1: Vectorized Scale and Shift

As shown, pasting 27px CSS with a CSS extension means that the shape is scaled to 27*2 smaller than pixels. This is inverted for contour shadows (e.g. 27*2 pixels more).

Horizontal / vertical offsets are self explanatory.

Step 2: Gaussian Blur

History

Mozilla developer David Baron has written a detailed article on CSS CSS shadow implementation here .

Until 2011, there was no standard value for CSS blur. It can correspond to various algorithms and parameters in different web browsers:

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

These historical differences may explain the purpose of the moz- prefix (which you mentioned) and the webkit- prefix. They probably set alternate box-shadow options for Mozilla and WebKit .

I expect these prefix versions to now become obsolete due to standardization, but can be used for compatibility with older browsers.

Standardization

According to Baron, there now exists an exact standard definition of the blur radius of a box:

The blur effect is now determined by the css3 background, and HTML - Gaussian blur with a standard deviation (σ) equal to half of this blur , taking into account a reasonable approximation error.

A mathematician could expand this into an exact formula.

Visual zoom

With some test errors in GIMP, I found that the Gaussian blur radius obtained by multiplying the CSS blur parameter by 5/3 (1.6666 ...), then rounding to the nearest integer, gives 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 Kukir shares some of the fastest Gaussian blur algorithms .