RE: css3 background

[Regarding IE9's border rendering]


Brad Kemper:
> When you say, "Dashed lengths are twice the width", I'm curious: is
> that as measured along the outside of the border, along the inside, or
> down the middle (going around corners and curves, those would yield
> different results)? And do you center the dash on each corner when
> possible?

Non-rounded dashes...

The border-width for each side is doubled to produce its dash length.  I believe that part is pretty consistent across browsers; they disagree on how much space to add between dashes.


For rounded borders...

The length of a dash remains constant on a side but is no longer simply double the border-width for that side.  Instead, the length of a dash is set to double the maximum width of the side and its two neighbors.  There are extreme cases where this can look somewhat unusual, but generally it makes for better joins and solves some geometric issues related to general shaping.



Dashed corner sharing ("center the dash on each corner") is only done when the dash length is the same for the two sides meeting at that corner.  In the rounded cases, this condition is always satisfied.



There's a lot of additional handling that makes the algorithm more complicating when you mix in different styles with dashed, but the above pretty much covers "normal people" use cases.



The 40px side in this example is approaching "abnormal edge case" (relative to its neighbors) but is included to allow for easier visualization.

 
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<style>
	div
	{
		background-clip: content-box;
		background-color: lightsteelblue;
		border-color: red green blue black;
		border-style: dashed;
		border-width: 5px 10px 10px 40px;
		height: 160px;
		margin: 10px;
		padding: 20px;
		width: 360px;
	}
	div:nth-child(2n)
	{
		border-radius: 25% 50%;
	}
	div:nth-child(3), div:nth-child(4)
	{
		border-style: dashed double dashed solid;
	}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

Received on Thursday, 20 October 2011 06:08:14 UTC