Re: [css3-background]Positioning of box-shadow blurs?

For webkit nightly, you don't need the prefix for border-radius, but  
you do for box-shadow (since it wasn't in the PR).

Webkit is not adjusting the radius on the shadow, so it would not be  
able to render the examples in the draft as per the illustration  
there. But it does maintain the sharp corner.

On Apr 30, 2010, at 1:05 PM, Brian Manthos <brianman@microsoft.com>  
wrote:

> Below is an example that would be useful in the spec.  Again, I've  
> excluded blur since the spec-via-discussion thus far is more  
> flexible on how that should be rendered.
>
>
> The "20100115 Firefox/3.6" build rounds the upper right corner of  
> both the inset and the outset shadow here.
>
> The "Opera/9.80 (Windows NT 6.1; U; en) Presto/2.5.18 Version/10.50"  
> build does not.
>
> Given our discussion, my understanding is that Opera's rendering is  
> the correct one.
>
>
> <html>
> <style>
> body {
>    background-color:lightsteelblue;
> }
> div {
>    border-color:green;
>    background-color:yellow;
>    border-style:double;
>    border-radius:50px 0px 50px 0px;
>    -moz-border-radius:50px 0px 50px 0px;
>    -webkit-border-radius:50px 0px 50px 0px;
>    box-shadow:black -50px 50px 0px -20px inset, blue 100px 100px 0px  
> 40px;
>    -moz-box-shadow:black -50px 50px 0px -20px inset, blue 100px  
> 100px 0px 40px;
>    width:300px;
>    height:100px;
> }
> </style>
> <body>
> <div></div>
> </body>
> </html>
>
>
> Side-note: Opera renders the upper right corner of the div border a  
> little weird (zooming makes it clearer what kind of shape is being  
> rendered).  It's unrelated to the shaping discussion at hand, though  
> it appears to be related to their shadow-rendering since the  
> triangular cut-out is the inner shadow color rather than the border  
> or background color of the div.

Received on Friday, 30 April 2010 21:54:14 UTC