-webkit- 和 -moz-border-radius 在表格上不起作用？ [复制]答案

【问题标题】：-webkit- and -moz-border-radius does not work on tables? [duplicate]-webkit- 和 -moz-border-radius 在表格上不起作用？ [复制]
【发布时间】：2010-11-27 07:13:20
【问题描述】：

这行得通

div {
  -moz-border-radius: 5px 5px 0 0;
  border:1px solid #000;
  margin:30px;
}

这不起作用

table {
  -moz-border-radius: 5px 5px 0 0;
  border:1px solid #000;
  margin:30px;
}

有人知道如何使用 -moz 和 -webkit 来处理表格吗？

【问题讨论】：

标签： webkit gecko css

【解决方案1】：

5.6. Effect on Tables

'border-radius' 属性可以适用于‘table’和‘inline-table’ 元素。当‘border-collapse’是 ‘collapse’，UA 可以申请 'table' 的边框半径属性和“内联表”元素，但不需要。在这种情况下，不仅必须是相邻的边界半径拐角不相交，但 a的水平和垂直半径单角不得延伸超过那个角落的单元格边界（即单元格的其他角落必须不受这个角落的影响边界半径）。如果计算值的边界半径会导致这个效果，然后所有的使用值表格的边框半径必须是减少相同的因子，使得半径既不相交也不延伸超越他们的界限各个角单元。

border-radius 对内部表格元素未定义在 CSS3 背景和边框中，但是将来可能会被定义规格。 CSS3 UA 应该忽略边界半径属性应用于内部表格元素时 ‘border-collapse’是‘collapse’。

【讨论】：

这都是关于 border-collapse 在我的情况下阻止边界半径的原因。