0

我在这里有一个电子邮件模板，它应用了 CSS 样式以使边缘变圆。

我希望左上角、右上角、左下角和右下角的外角是圆角的。所有内部桌子边缘/角落应该是方形的。

但是，您可以看到，它也使内部边缘变圆：

标题：

在此处输入图像描述

页脚：

在此处输入图像描述

我应该如何将我的 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;
}
4

3 回答 3

2

Use the shorthand, so,

For Header (#templateHeader),

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

enter image description here

For Footer (#templateFooter),

border-radius: 0 0 5px 5px;

enter image description here

于 2012-12-11T03:06:51.257 回答
2

您正在应用border-radiustotd元素，为了查看基于您的 DOM 组织的圆角边框，您必须将边框半径应用于table元素。

于 2012-12-11T03:10:23.100 回答
0

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

于 2012-12-11T02:47:07.843 回答