Re: [css3-background] box-shadow spread Multiple Choice Question

On Thu, Jun 10, 2010 at 12:18 PM, Brad Kemper <> wrote:
> On Jun 10, 2010, at 9:39 AM, Brendan Kenny <> wrote:
>> and as usually implemented (as a Gaussian or Gaussian-like function),
>> radius is the more appropriate term.
> How so? I'm willing to admit that maybe you know something I don't, so
> please clarify: if I have 'box-shadow: 0 0 8px black' then what is 8px the
> radius of? Where is the other half of the circle for which 8px is a radius?

Gaussian blurs (and blurs that look like Gaussian blurs) calculate the
value of a blurred pixel by taking the weighted sum of the pixels
surrounding it in all directions. The weights used are based on a
function of the distance from each surrounding pixel to the center
point, which is why "radius" makes more sense in that context. In this
way of thinking there is also no need for the notion of a
"brush"...pixels of the same color blur to that color, so pixels
farther from the shadow edge than a radius distance don't change when
blurred (and in a pixel shader it can often be faster just to blur all
the pixels in the entire affected area, even the ones that won't

However, since the interior of the blur is left undefined, thinking of
it as a blur brush of diameter (2*radius) is exactly equivalent.
Either way is probably fine (after all, whether a radius or a diameter
is to be specified, the other can be found by just multiplying or
dividing by two), I was just making the minor point that, unlike the
term "spread-radius" vs "spread," "border-radius" does make sense.

>> The current language would just have to be tweaked accordingly.
> Right. It wouldn't change authoring or implementation (maybe a few blogs
> would need updating). I think I'd be more comfortable with something like
> this:
> "The blur is perpendicular to and centered on the shadow's edge and defines
> a gradient color transition ranging from the full shadow color at the
> endpoint of the blur inside the shadow to fully transparent at the endpoint
> outside it."

That looks good. Existing uses of the box-shadow property -- either
through vendor prefixed versions or in UAs that have dropped the
prefix (Opera and IE9?) -- will have to be doubled in value to get the
same effect, though.

Received on Thursday, 10 June 2010 19:00:02 UTC