如何在非CSS3浏览器上制作圆角？

Question

我知道在这种情况下我必须使用图像,每个角落一个.

例如,如果我需要一个围绕给定元素的8px边框半径的纯蓝色4px边框,我相应地设计了四个图像,

• 自左上角corner.png
• 右上,corner.png
• 左下,corner.png
• 右下-corner.png

如果可能的话,如何在不使用表的情况下实现此目的？

Answer 1

你试过http://css3pie.com/about/吗？在这种情况下你不必使用图像......

Answer 2

我不会使用其他人在这里建议的 css 解决方法/黑客，我会继续使用图像。是的，它的设置比较繁琐，但它是跨浏览器的并且很强大。我已经尝试了许多这样的 CSS 解决方法，并且发现它们充其量是不可预测的。它们可能在某些 IE 安装上运行良好，但在其他 IE 安装上则不然（例如，使浏览器完全崩溃）。更糟糕的是，我们无法找出为什么它在某些安装上运行良好，而在其他安装上运行不佳（这是针对相同的 IE 版本）。

我要么：在 IE 上没有弯角，要么使用图像。您可以使用嵌套的 div：

<div class="top-left">
   <div class="top-right">
       <div class="bottom-left">
          <div class="bottom-right">

             ... content ...
          </div>
       </div> 
    <div>
 </div>

在 css 中，您background-image为每个类设置相应的值，如下所示：

div.top-left { background: url('/top-left-corner.png') left top no-repeat; }

并为其中一个 div 设置边框样式，例如：

border: 4px solid #f00;