Question

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

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

左上-corner.png
右上方-corner.png
左下-corner.png
右下-corner.png

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

Answer 1

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

Answer 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;

Answer 3

在谷歌上有这么多链接，只需键入圆角css，你应该找到一些帮助。较旧的技术涉及使用像你想要四舍五入的盒子上方和下方的一组b标签，并设置边距以产生你需要的半径，但它有点涉及并且有更好的抗锯齿解决方案。

Answer 4

如果您允许使用表格和某些代码，则无需图像即可轻松切换颜色：

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

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

4 个答案: