添加背景封面圆角 [CSS/Twitter Bootstrap]答案

【问题标题】：Adding background covers rounded corner [CSS/Twitter's Bootstrap]添加背景封面圆角 [CSS/Twitter Bootstrap]
【发布时间】：2013-10-18 20:45:22
【问题描述】：

我正在使用 Twitter 的 Bootstrap 为我的网站提供一致的外观，当我为表格的 thead tr 添加背景时遇到了问题。这是来自 Bootstrap 的 CSS：

.table-bordered {
  border: 1px solid #ddd;
  border-collapse: separate;
  *border-collapse: collapsed;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {
  -webkit-border-radius: 4px 0 0 0;
  -moz-border-radius: 4px 0 0 0;
  border-radius: 4px 0 0 0;
}

这是我的 CSS：

tr.title
{
    background-color: #2c2c2c;
    background-image: -moz-linear-gradient(top, #333333, #222222);
    background-image: -ms-linear-gradient(top, #333333, #222222);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
    background-image: -webkit-linear-gradient(top, #333333, #222222);
    background-image: -o-linear-gradient(top, #333333, #222222);
    background-image: linear-gradient(top, #333333, #222222);
    background-repeat: repeat-x;
}

以及相关的HTML：

<thead>
<tr class="title">
<th colspan="5"><strong><a href="{$url}">{$name}</a></strong><br />{$description}</th>
</tr>
</thead>

问题是左上角的圆角被.title 背景移除。当我删除背景代码时，它又回来了。我该如何解决这个问题？

【问题讨论】：

什么浏览器？似乎 IE9 无法将背景渐变剪裁到边框半径。也许看看 background-clip 属性？
在摆弄它之后，看起来th 出于某种原因导致了这个问题。添加相同的border-radius 定义修复了它。只是为了记录，我使用的是 Chrome。
啊，是的——有点道理。 TR 不会剪辑它的内容，这就是为什么 TH 的直角会弹出。

标签： twitter-bootstrap css

【解决方案1】：

当您设置背景图片时，您会松开圆角，
您必须重新定义边框半径：

例子：

.modal-header {
    cursor: pointer;
    background-image: url('myimg.jpg');
    border-radius: 6px 6px 0 0;
}

【讨论】：

【解决方案2】：

在 Bootstrap 3.0 中，您需要将表格放入面板中。

HTML：

<div class="panel panel-primary">
    <table class="backgrounded table">
        <thead>
        ....
<thead></table></div>

CSS：

.backgrounded thead {
   background: #499bea;    
}

【讨论】：