Question

我已经在Chrome和Firefox中对此进行了测试。我尝试在我的桌子上做一个略微圆润的边缘，我不明白为什么border-radius命令不起作用。

这里是jfiddle：

http://jsfiddle.net/hz018pLz/

当我使用CTRL+SHIFT+I查看计算出的样式时，我看到此元素有

border-radius: 20px;勾选，但取消选择它不会改变表格的显示。

我需要做什么才能使其发挥作用？

以下是代码：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

里面的元素仍然是矩形并且完全可见，因此您可以更改overflow属性以避免使用visual rect：

#bp-table {
  overflow:hidden;
}

检查UpdatedFiddle

是什么导致border-radius不起作用？

1 个答案: