如何使用css1创建一个圆角的容器？

Question

我想创建一个没有使用图像的圆角的容器（仅使用border和div标签）。

它应该适用于所有浏览器。

Answer 1

CSS圆角与“所有浏览器”不兼容，有太多版本和许多旧版浏览器仍在使用纯粹的CSS解决方案。

如果您声明无法使用图片，那么您也会受到严重限制，因为这是解决方法之一。

但是，我认为您应该考虑使用CSS圆形边框，因为您可以在不支持它们的浏览器上优雅地降级，使用其他CSS技术使元素看起来一样好。这几乎是大多数人这样做的原因。

这在实践中的意思是，当您的用户升级其浏览器时，他们“自动”获得好处，而无需编写两个版本的网站。

Answer 2

您想支持哪些浏览器（“所有浏览器”都包含IE6？IE5呢？早于此？）。

您可能知道CSS border-radius属性。这是在盒子上绘制圆角的标准方法。

由于你在讨论“所有浏览器”，我会假设你担心IE的旧版本，而你是对的：border-radius在IE6，IE7或IE8中不起作用

如果您不想使用图片，但确实想支持这些浏览器，那么您将不得不使用基于Javascript的解决方案。

到目前为止，最好和最容易使用的是CSS3Pie。它使用IE的behavior样式挂钩到样式表，并使IE使用标准的border-radius样式。请参阅CSS3Pie网站上的说明和演示，了解有关其工作原理的更多信息，但足以说明这是我在IE浏览器中推荐的唯一解决方案。