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 回答