添加背景圓角[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]

回答

相關問題