不使用背景图片如何实现圆角表格？

Question

不使用背景图像，能否内联地圆角表格角?

- Aasim Azam

Answer 1

演示现场

table{
    background: red;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}

叹息和内联...

<table style="background: red;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;">

不太确定您所说的将单元格转换为 div 是什么意思。

- Loktar

---

因为你应该尽量不使用内联样式，因为它们在维护方面非常糟糕。 - Loktar

我知道 - 这只是一个测试表。 - Aasim Azam

这是一个不完整的答案，这是圆角，但不是圆形边框：http://jsfiddle.net/daBuV/808/边框仍然是方形的。也许一个诀窍是在圆角 div 中没有边框？ - vdu

@vdu 这绝对是圆的。如果你想让它更加“圆润”，只需增加半径数值即可。 - Loktar

@Loktar 请看我上面的链接，边框不在那里，所以形状是圆形而没有边框。如果你想要边框，解决方案仍然缺失。正如你可以看到我上面的链接，边框是方形的。http://jsfiddle.net/daBuV/810/ - vdu

哦，你是指实际的边框，我只是在提到表格本身的边缘。好发现！ - Loktar

Answer 2

该示例将在所有角落创建半径为5像素的圆角边框。

#example{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

如果您想在不同的角落上使用不同的圆角边框，或者特定的圆角，请修改下面的代码。

#example1{
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 15px;
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 15px;
}

请查看http://border-radius.com/。

- Virendra

Answer 3

内联样式仍然适用于电子邮件编码，因此它仍然相关。

- Mindy

Answer 4

是的，您可以做到这一点。尝试下面的代码。

#example1 {
-moz-border-radius: 5px;  
-khtml-border-radius: 5px;
-webkit-border-radius: 5px; 
}

想了解更多细节，请使用此教程。

- Abhendra Singh