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

【问题标题】：How can I make rounded corners on non-CSS3 browsers?如何在非 CSS3 浏览器上制作圆角？
【发布时间】：2011-06-16 01:56:23
【问题描述】：

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

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

左上角.png
右上角.png
bottom-left-corner.png
右下角.png

如果可能的话，我应该如何在不使用表格的情况下实现这一点？

【问题讨论】：

你不应该为此烦恼。 IE 用户可以生活没有圆角。
嗯，是的，主要是IE，但可能还有一些不太知名的浏览器。

标签： html css

【解决方案1】：

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

【讨论】：

从长远来看，使用图片会让生活变得更艰难，将其保留为 css 意味着您可以更轻松地处理设计更改并使其易于访问:) +1
谢谢，非常有趣的资源！我不知道。它不需要图像来制作圆角，这是一个很大的优势！但它只是 IE，并且要求用户安全设置允许 .htc 文件。

【解决方案2】：

我会不使用其他人在这里建议的 css 变通办法/黑客，我会继续使用图像。是的，它的设置更加繁琐，但它是跨浏览器且健壮的。我已经尝试了许多这些 css 解决方法，并发现它们充其量是不可预测的。它们可能在某些 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;

【讨论】：

感谢您的体验，没有什么比让用户的浏览器崩溃更糟糕的了！而且我认为使用嵌套的 div 是一个聪明的想法 - 也许它在语义上不正确，但它看起来确实可靠并且仍然符合 css 标准。
@Luc1245 - 嵌套的 div 基本上是在 css3 之前一直这样做的。
我已经尝试过了，它适用于非透明图像。但在我的情况下，我可以在每个角落看到一个圆形边框加上一个方形边框；我使用的图像的像素都是透明的，除了那些构成拐角曲线的像素，这样如果底层父元素的背景颜色发生变化，我就不必制作一组不同的图像。请问，这种情况你有解决办法吗？
@Luc1245 - 是的，它不适用于具有透明度的图像。您必须将图像背景设置为与您的页面相同。如果您更改页面背景颜色会很痛苦，因为您需要更改图像，但不幸的是您必须这样做。 AFAIK没有其他办法。

【解决方案3】：

在 google 上有很多链接，只需输入圆角 css，您应该会找到一些帮助。较旧的技术涉及在您想要四舍五入的框上方和下方使用一组 b 标签并设置边距以产生您需要的半径，但它有点复杂，并且有更好的抗锯齿解决方案可用。

【讨论】：

不错的链接，可以生成盒子图片下载，不用自己设计

【解决方案4】：

如果你允许表格和一些代码，你可以在没有图像的情况下轻松切换颜色：

http://spruce.flint.umich.edu/~jalarie/jaa_kcm.htm

【讨论】：

好工具！在我可以允许表格（以及角落中的一些跨度）的情况下，我将使用它。很高兴我可以动态改变颜色。
您的生成器有很多选项，但我没有找到“边框宽度”或“边框颜色”之类的选项。我可以用它来制作像 css border-radius 那样带有圆角边框的圆角吗？