W3C home > Mailing lists > Public > www-style@w3.org > April 2010

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

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>
Message-ID: <FA122FEC823D524CB516E4E0374D9DCF014EBDF7@TK5EX14MBXC136.redmond.corp.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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:26 GMT