添加背景圆角[CSS/Twitter的Bootstrap]

我使用Twitter的Bootstrap为我的网站提供了一致的外观，并且当我为表的thead tr添加背景时遇到问题。这里的CSS从引导：添加背景圆角[CSS/Twitter的Bootstrap]

.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背景去除。当我删除后台代码时，它会返回。我怎样才能解决这个问题？

来源

2012-03-06 Steven Zezulak

什么浏览器？看来IE9无法将背景渐变剪裁到边框半径。也许检查背景剪辑属性？ – Pickle 2012-03-06 21:43:18

在摆弄它之后，它看起来像是由于某种原因导致了问题。添加相同的'border-radius'定义修复了它。而为了记录，我正在使用Chrome。 – 2012-03-06 23:59:10

啊是的 - 这是有道理的，种。 TR不会剪辑它的内容，这就是为什么TH的直角被弹出的原因。 – Pickle 2012-03-07 06:08:40

当您设置背景图片你失去了圆角，
你必须重新定义边界半径：

例子：

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

来源

2013-06-20 14:07:33

在引导3.0，你需要把你的表到面板。

HTML：

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

CSS：

.backgrounded thead { 
    background: #499bea;  
}

来源

2013-10-18 12:45:22 Tolsi

添加背景圆角[CSS/Twitter的Bootstrap]

回答

相关问题