CSS 圆角

Question

我看过很多相关代码，但似乎都不能很好地或完全地解决问题。我已经使用了图片来实现圆角，但我需要的是能够使一个<table> 边框变圆的代码。我所找到的唯一解决方案就是在边框周围的单元格中插入图片。还有其他方法可以尝试吗？

- Tony C

Answer 1

尝试：

selector {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

这将适用于Firefox，Safari，Chrome和任何其他支持CSS3的浏览器。最好为此制作一个单独的类 - 需要三个语句才能实现完全兼容性。

此外，可以尝试这里（cssjuice.com）使用更多的图像技术。

我不确定这是否适用于表格，但如果您完全控制，请不要使用<table>进行布局。请注意，我认为在表格数据中使用表格标记是可以的，但不应在应使用DIV的地方使用它们。

更新：仅应用于一个角落：

-moz-border-radius-topleft: 3px;
/* ... */
-webkit-border-top-left-radius: 3px;

继续使用topright或top-right。

- Lucas Jones

---

有没有简单的IE8解决方案呢？ - JoshBerke

说实话，我不确定IE8怎么样，我使用的是Firefox ;) - Lucas Jones

这张表格实际上可能包含了表格化的信息。正确使用表格仍然有很大的语义价值。 - Ian Elliott

这并不是关于随意地在任何时候、任何地方使用它们，而是当展示表格信息时正确地使用它们。例如，如果我有一个数据库中要显示的记录列表，使用表格来展示是合适的。表格不是为布局设计的，而是为展示表格信息设计的，因此在这种情况下使用它们是正确的语义。 - Ian Elliott

如果让IE的边框变成方形不算太丑的话，为什么不这样做呢？让好的浏览器保留漂亮的外观。 - Nosredna

Answer 2

尝试使用CSS 3选择器：

.element {
    border-radius:5px
}

对于Safari、Google Chrome（Webkit）和Mozilla，使用以下两个选择器（尽管Mozilla支持CSS 3选择器，但不确定其他浏览器是否支持）：

.element {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}

- Gav

Answer 3

要在所有浏览器上获得支持的唯一方法是在锚标签上使用图像背景，通常还与其容器标记上的图像相结合。

例如，使用以下HTML：

<ul>
 <li><a href="">something</a></li>
<ul>

我会将一个图片放在锚点标签上，另一个放在li标签上，这样该元素就可以是可变宽度的，并且仍然具有圆角。

虽然CSS3功能和JS解决方案也可以起作用，但并不完全跨浏览器兼容。

- Ian Elliott

Answer 4

你可以通过CSS将它们圆形化，但只适用于支持的浏览器。

你的其他非图像选项是基于脚本的，比如jQuery Corners或类似的脚本。

这两种方法都有注意事项（IE支持、禁用JavaScript的访问者等）。如果你决定使用它们，我建议你专注于在支持它的浏览器中让它们与CSS配合工作，并确保在IE中没有它们时看起来仍然可接受。

- John Sheehan

---

jQuery Corners是一个非常棒的非图像实现，甚至支持IE中的抗锯齿。为了好玩，我在IE中运行“调整”后查看了生成的DOM...哎呀！他们的示例页面肯定有很多圆角，但我会说最终标记的85%以上都是DIV和样式，用于支持IE。;-) - scunliffe

Answer 5

这里有一种不依赖于浏览器（据我所知，它适用于流行的浏览器）的方法。它不使用表格，因此您需要将表格放在最深嵌套的div中，它很冗长而且重，但它有效。代码中引用的图像是您自己绘制的圆角。圆角的半径为44px。

这是http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml的一个变体。

<div class="tl">
    <div class="tr">
        <div class="bl">
            <div class="br">
                <div class="t">
                    <div class="b">
                        <div class="l">
                            <div class="r">
                                <div>Do or do not, there is no try</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.tl
{
    font-family: Verdana, Arial;
    font-size: 16px;
    position: relative;
    left: 30px; 
}

.tl, .tr, .bl, .br
{
    width: 655px;
    height: 250px;
}

.t
{
    width: 567px;
    height: 250px;    
    margin: 0 0 0 44px;
}

.b
{
    width: 567px;
    height: 250px;    
}

.l
{
    width: 655px;
    height: 162px;    
    margin: 44px 0 0 -44px; 
}

.r
{
    width: 655px;
    height: 162px; 
}

.bl
{
    background: url(/images/front/rcbla.png) 0 100% no-repeat;
}

.br
{
    background: url(/images/front/rcbra.png) 100% 100% no-repeat;
}

.tl
{
    background: url(/images/front/rctla.png) 0 0 no-repeat;
}

.tr
{
    background: url(/images/front/rctra.png) 100% 0 no-repeat;
} 

.t
{
    background: url(/images/front/adot.png) 0 0 repeat-x;
}

.b
{
    background: url(/images/front/adot.png) 0 100% repeat-x;
}

.l
{
    background: url(/images/front/adot.png) 0 0 repeat-y;
}

.r
{
    background: url(/images/front/adot.png) 100% 0 repeat-y;
}

- Steve

---

那很繁重。使用表格不是更容易吗？ - Tony C

Answer 6

我假设上面的圆角CSS在IE6中不起作用。这是你需要记住的事情。

使用带有背景图像的三个堆叠的div是最简单的方法。

<div class="top">&nbsp;</div>
<div class="mid"> <!-- content --> </div>
<div class="bottom">&nbsp;</div>

的背景可以通过CSS垂直平铺。在IE6中有效。

- T E

Answer 7

如果您不必与所有浏览器一起工作，请考虑使用border-radius。有关更多信息，请参见http://www.css3.info/preview/rounded-border/。较新的Mozilla和基于Webkit的浏览器支持此标签或moz-border-radius和-webkit-border-radius。

- Bob

Answer 8

我倾向于使用之前 person-b 提到的 border-radius 选项。

如果我绝对必须支持 IE（即它是设计的基本部分，而不仅仅是小的增强），我曾经尝试过 dd_Roundies，它利用 VML 来完成工作。

- Olly Hodgson