问题
This works
div {
-moz-border-radius: 5px 5px 0 0;
border:1px solid #000;
margin:30px;
}
This does not work
table {
-moz-border-radius: 5px 5px 0 0;
border:1px solid #000;
margin:30px;
}
Does anyone know how to use -moz and -webkit to work on tables?
回答1:
5.6. Effect on Tables
The ‘border-radius’ properties do apply to ‘table’ and ‘inline-table’ elements. When ‘border-collapse’ is ‘collapse’, the UA may apply the border-radius properties to ‘table’ and ‘inline-table’ elements, but is not required to. In this case not only must the border radii of adjacent corners not intersect, but the horizontal and vertical radii of a single corner may not extend past the boundaries of the cell at that corner (i.e. the cell's other corners must not be affected by this corner's border-radius). If the computed values of the border radii would cause this effect, then the used values of all the border radii of the table must be reduced by the same factor so that the radii neither intersect nor extend past the boundaries of their respective corner cells.
The effect of border-radius on internal table elements is undefined in CSS3 Backgrounds and Borders, but may be defined in a future specification. CSS3 UAs should ignore border-radius properties applied to internal table elements when ‘border-collapse’ is ‘collapse’.
来源：https://stackoverflow.com/questions/1407371/webkit-and-moz-border-radius-does-not-work-on-tables