如何使跨浏览器，W3C有效，语义非JavaScript ROUND角落？

Question

我想制作一个 跨浏览器 （FF3，IE6，Safari，Opera）， W3C有效 （HTML和CSS都可以）， 可拉伸 （水平垂直），
没有JavaScript ，带有 语义 和较小的HTML标记 Round CORNER 。 图像可用于IE6。

我已经尝试并测试了社区中可用的许多技术。但是，一切都有上述问题之一。如果有人知道我想要什么，请与我分享？

记住，我想使其不使用任何类型的JavaScript，jquery或任何类型的js。

Answer 1

两个主要的渲染引擎已经支持CSS3了一段时间，这使得圆角变得很简单：

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

当然，这对IE6或7没有任何影响 （适用于IE8） 或8，因此您需要使用带有拐角图像的讨厌的堆叠分割来实现，这不符合您的语义要求。

我不喜欢涉及javascript或css-hacks的显示黑客-
所以我使用CSS3并检查IE7中的平方版本是否可以接受。我已经做了一段时间了，因为IE也从未使用过PNG透明性-
这意味着您不能在图案背景上很好地覆盖圆角图像。IE8是一个很大的改进，因此问题的确开始消失了-但是我理解您希望它在IE6及更高版本上运行的愿望。

更新：最初计划包含在IE8中的各种CSS3片段实际上已从最终版本中删除。 边界半径是受害者之一。