- From: Brian Manthos <brianman@microsoft.com>
- Date: Fri, 30 Apr 2010 20:05:51 +0000
- To: Brad Kemper <brad.kemper@gmail.com>, "www-style@w3.org" <www-style@w3.org>
- CC: Tab Atkins Jr. <jackalmage@gmail.com>, Alex Meiburg <timeroot.alex@gmail.com>, Prabs Chawla <pchawla@microsoft.com>
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 20:06:29 UTC