如何在非CSS3浏览器上做圆角？ [英] How can I make rounded corners on non-CSS3 browsers?

问题描述

例如，如果我需要一个坚固的蓝色4px边框，边框周围有8px的边框给定元素，
和我已经相应地设计了四个图像，

• top-left-corner.png


• top-right-corner.png


• bottom-left-corner.png


• li>
  

如果可能，不使用表，我应该如何实现？

解决方案

我会不使用css的解决方法/ hacks其他人建议在这里，我会继续使用图像。是的，它更容易设置，但它是跨浏览器和健壮。我已经尝试了一些这些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无重复; } 
  

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

  border：4px solid＃f00; 
  

I know that I have to use images in this case, one per corner.

For example if I need a solid blue 4px border with 8px border radius around a given element, and I have designed four images accordingly,

• top-left-corner.png
• top-right-corner.png
• bottom-left-corner.png
• bottom-right-corner.png

How should I implement this, if possible without using a table?

解决方案

I would not use the css workarounds/hacks others have suggested here, I would keep to using images. Yes it's more fiddly to set up but it is cross-browser and robust. I have tried a number of these css workarounds and have found them to be unpredictable at best. They might work fine on some IE installs, but not on others (e.g completely crashing the browser). And worse we were unable to isolate why it worked fine on some installs, and not on others (and this is for the same IE version).

I would either: live without curved corners on IE, or use images. You can use nested divs:

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

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

and in css you set the appropriated background-image for each class, something like this:

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

and set the border style for one of the divs too, e.g:

border: 4px solid #f00;

这篇关于如何在非CSS3浏览器上做圆角？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！