表角落的边界半径不起作用

时间:2012-12-11 02:43:25

标签: html css border css-tables

我有一个电子邮件模板here,其中应用了CSS样式以使边缘变圆。

我希望左上角,右上角,左下角和右下角都是圆角。所有内部桌边/角应为方形。

但是,你可以看到它也在内部边缘:

部首:

enter image description here

页脚:

enter image description here

我应该如何将CSS修改为仅限于外边缘/角落?

table {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-collapse: separate;
}
/* Top Left */
table tr:first-child th:first-child {
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}
/* Top Right */
table tr:first-child th:last-child{
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
}
/* Bottom Left */
table tr:last-child td:first-child{
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
}
/* Bottom Right */
table tr:last-child td:last-child{
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
}

3 个答案:

答案 0 :(得分:2)

使用速记,所以,

对于标题(#templateHeader),

border-radius: 5px 5px 0 0; /*top-left top-right bottom-right bottom-left*/

enter image description here

对于页脚(#templateFooter),

border-radius: 0 0 5px 5px;

enter image description here

答案 1 :(得分:2)

您正在将border-radius应用于td元素,以便根据您的DOM组织查看圆角边框,您必须将border-radius应用于table元素。< / p>

答案 2 :(得分:0)

什么。 Internet Explorer不支持border-radius属性。