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

On Apr 27, 2010, at 6:54 PM, Sylvain Galineau wrote:

>> 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 ?

That is absolutely what I want and expect. Here, I created a visual aid:

http://www.bradclicks.com/cssplay/spread.png

> If so, that shadow does not look like a spread 
> version of the element anymore.

It does to me. It is a rather extreme example. It is probably more common for the spread to be less than the blur, or at least not a whole lot bigger, so that makes this one pretty unusual in my experience. This is a huge spread in the example, but at least it follows the path in a natural and even way.

> 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.

That is not at all what I would prefer. That distorts the path of the thickening stroke to no longer be a stroke of even thickness.