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

> From: Brad Kemper [mailto:brad.kemper@gmail.com]
> Sent: Wednesday, April 28, 2010 12:23 AM
> To: Tab Atkins Jr.


> 
> > I don't think I like the idea of a discontinuity where sharp edges
> > stay sharp, but rounded edges get fatter.
> 
> I don't know why you'd find that suprising. When you have a thick
> border, the radius on the inside of the border-radius is different
> from the radius on the outside. Think of this as a sort of extra
> border-width around the shadow shape, but with border-radius defining
> the inside radius of that extra borders's corners instead of the
> outside radius.

Brad, if you and other others want an effect whereby the shadow of a 
rectangular box with nearly sharp rounded corners could, given enough 
spread, turn into a near circle, then that's what we're going to give 
you. (The smaller the box, the smaller the spread needed to turn the 
shadow of a box into a blob).

But if that is the desired effect then the spec cannot require that
"The shadow should not change shape when a spread radius is applied".

If we simply add the spread radius to each border-radius, we *are* 
changing the shadow's shape. And the bigger the spread radius is 
relative to the element's width/height the more distorted that shape 
will be compared to the original.

See the attached file for my previous example. The top box is the
one you want a shadow for. No blur, but a 50px spread. Adding
the spread to width, height and border radii gives you the top
black box. Scaling up the radii gives you the bottom black box.

I think the spec implicitly requires the shape of the shadow to
be that of the bottom box, or something very close to it. Elika's
definition says that it should look like the top black box.

I'm not an author but I'm surprised.

Received on Wednesday, 28 April 2010 13:26:43 UTC