是什麼導致邊界半徑不起作用？

我已經在Chrome和Firefox中對此進行了測試。我正在試圖在我的桌子上做出輕微的圓角邊緣，我不明白爲什麼border-radius命令不起作用。是什麼導致邊界半徑不起作用？

這裏的jfiddle：

當我使用CTRL+SHIFT+I看計算的風格，我看到這個元素有

border-radius: 20px;勾選，但取消選擇它並沒有改變，以顯示的表格。

我沒有這樣做，我需要做的，爲了這個工作？

下面的代碼，以及：

#bp-table { 
 
    font-family: Century Gothic, sans-serif; 
 
    font-size: 11px; 
 
    margin: 15px; 
 
    width: 99%; 
 
    max-width: 99%; 
 
    border-radius: 20px; 
 
    border-collapse: collapse; 
 
} 
 
#bp-table th { 
 
    font-size: 11px; 
 
    font-weight: 700; 
 
    text-align: left; 
 
    padding: 8px; 
 
    background: rgb(60, 55, 88); 
 
    color: #ffffff; 
 
} 
 
#bp-table td { 
 
    padding: 8px; 
 
    background: #e8edff; 
 
    text-align: left; 
 
    border-bottom: 1px solid #fff; 
 
    border-top: 1px solid transparent; 
 
} 
 
#bp-table tr:hover td { 
 
    background: #f0d3d3; 
 
    color: #1e1e5b; 
 
}

<table id="bp-table"> 
 
    <thead> 
 
    <th>A</th> 
 
    <th>B</th> 
 
    <th>C</th> 
 
    <th>D</th> 
 
    <th>E</th> 
 
    </thead> 
 
    <tbody> 
 
    <td>one</td> 
 
    <td>one</td> 
 
    <td>one</td> 
 
    <td>one</td> 
 
    <td>one</td> 
 
    </tbody> 
 
</table>

來源

2014-12-05 Brian Powell

請在您的問題中輸入代碼，而不僅僅是jsfiddle，以便在發生link-rot時，您的問題仍然有效。 – Gerwin 2014-12-05 16:19:43

@HashemQolami我認爲這個答案比其他重複更精確...我的解釋爲什麼會發生，但重複上有隻是試試這個... – DaniP 2014-12-05 17:45:52

內的元素仍然矩形和全可見這樣你就可以改變overflow屬性，以避免視覺RECT：

#bp-table { 
    overflow:hidden; 
}

檢查UpdatedFiddle

來源

2014-12-05 16:20:03 DaniP

我還建議使用其他前綴 - [發電機]（ http://border-radius.com/）實際上爲你創建它們（爲了更好地支持舊瀏覽器上的跨瀏覽器，例如*，如果你需要Firefox 3.6或更低或者iOS 4.3和Safari 5.0 *） – jbutler483 2014-12-05 16:22:50

@ jbutler483 border-radius doesn' t需要前綴 – DaniP 2014-12-05 16:23:35

它適用於超舊的未使用的瀏覽器。：P – 2014-12-05 16:28:42

是什麼導致邊界半徑不起作用？

回答

相關問題