RE: [css3-background] box-shadow spread radius and rounded corners

> From: fantasai [mailto:fantasai.lists@inkedblade.net]


> Hm, I didn't realize this was ambiguous.
> 
> The simplest definition would be:
>    * When border-radius is zero, the shadow's radius is also zero.
>    * When border-radius is nonzero, the shadow's radii are increased
> (or decreased)
>      by the spread value. For circular curves, this effectively moves
> all points on
>      the curve outward by the same amount the sides move outward.

That's what I initially thought too. But take a box with:

width:300px;
width:200px;
border-radius:10px;

And you now define a shadow with no blur radius and a spread radius of 50px.
The shadow will be 400px wide x 300px high but should the border-radius in 
each corner become 60px ? If so, that shadow does not look like a spread 
version of the element anymore. The corners are significantly distorted vs.
the 'original' being shadowed.

If, instead, you figure that your width is being increased by 1/3 and make
your shadow's border-radius ~13px, you will get something closer to a spread
version of the shadowed box. I think that's what we're after. Well, that's 
what I'm after at any rate.

My assumption that this is what authors would prefer is, however, not backed
up by evidence yet.

Received on Wednesday, 28 April 2010 01:54:45 UTC