1

我正在开发一个 HTML/CSS 电子邮件模板，并希望将 3px 的边框半径添加到外部表/容器中。

这是页面。我尝试将其添加为样式，table td {}但没有成功。我应该定位另一个元素吗？

4

3 回答 3

2

使用伪选择器相对容易。

table{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-collapse: separate;
}
/* Top Left */
table tr:first-child td:first-child{
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}
/* Top Right */
table tr:first-child td: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;
}
于 2012-12-08T02:59:24.157 回答
1

这取决于许多因素，即：

  • 浏览器（FF、Chrome、IE 等）
  • 平台（PC/台式机/手机等）
  • CSS 级别

但是，通常，您不能为单个表格元素设置样式，例如<tr>或<td>。

你可以做的是：

 table {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-collapse: separate;
    overflow: hidden;
 }

对于表格和其他元素...

表必须被视为一个整体。但是您可以将上述内容应用于<span>等<div>。

对于 IE（由于缺乏标准化，通常会导致大量 CSS 问题），您可以使用条件 CSS 作为主要 CSS 元素的补充：

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie-css.css" />
<![endif]-->
于 2012-12-08T03:05:43.533 回答
0

如果你想用更少的代码做到这一点，你可以像这样添加“溢出隐藏到表格元素：

table{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-collapse: separate;
    overflow: hidden;
}

这样你就不需要所有的伪选择器

于 2012-12-08T03:13:19.107 回答