The W3C have today issued a last call working draft for the CSS3 Backgrounds and Borders module.
The updated specification includes several changes from the previous Candidate Recommendation release including:
* Addition of ‘content-box’ value of ‘background-clip’.
* Change to the ‘background’ shorthand syntax for ‘background-clip’ and ‘background-origin’.
* Removal of recommendation to use gradients for color transitions when ‘border-radius’ produces a curve.
* (Re)Addition of ‘box-shadow’ property.
* Various clarifications.
You can read further detail on the changes in our previous article here.
You can skip to the end and leave a response.
why is a border required to have rounded corners on a box. this makes no sense.
Jeffrey, why do you think that? Is it because of the name ‘border-radius’? It does not require a border, but it is applied to the border box (regardless of whether the border box contains a border or not), as apposed to say, the padding box or content box.
I do think we could have avoided a lot of confusion if we had simply called it ‘corner-radius’, but it is a little late to change that now. And it does make sense to have it in the Backgrounds & Borders module, as this effect is mostly invivible without a background, border, or box-shadow.
I’ve mentioned once before that I’d love the ability to have shadows with purely vertical or horizontal spread and blur. For example, to be able to give a declaration like “box-shadow: vertical 0 0 5px black;” and have matching elements cast a shadow above and below but not to the sides, or to say “box-shadow: inset horizontal 0 0 5px black;” and have matching elements receive an inner shadow on the sides but not on the top and bottom.
It probably is too late to get such shadow in the spec, but I too would like to add my support for the addition of vertical/horizontal only shadows.
Maybe not as strict as Daniel Walker proposed though.
You could have two extra values (percentages 0-100) that control the spread bias on each axis.
For example: box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .5) 10% 100%
Would produce a vertical shadow.