CSS边框半径和边框折叠[重复]

Posted 2023-03-05

【中文标题】CSS边框半径和边框折叠[重复]

【英文标题】：CSS border radius and border collapse [duplicate]

【发布时间】：2012-10-14 20:54:30

【问题描述】：

我正在尝试在 CSS 中设置一个边框半径为 12px 的表格。表格中的 tr 或 td 没有边框，只有一个边框围绕整个批次。我希望表格中的第一行在前 2 个角上具有边框半径，但在底部 2 上没有边框半径（所以它就像表格的标题），我已经设法做到了。但是，这会在表格和第一行之间创建一个白色边框 - 我希望它们在没有白色边框的情况下相互对齐，因为标题行有彩色背景。

我尝试使用边框折叠来执行此操作，但这会抵消整个表格上的边框半径，使标题行在顶部 2 个角处变圆，但在方形表格内。

这很难解释，所以可以在here 找到一个例子。您可以看到表格和蓝色背景的行之间的白色边框。

有没有人知道如何在不崩溃的情况下摆脱边界？ 提前致谢

【参考方案1】：

试试这个：

<table class="admin" style = "border-spacing:0px;">

显然，您可以将该内联样式提取到它自己的类中，但我想明确地向您展示，表格上的边框间距就是您所追求的。

如果您不希望文本紧贴表格边框，您应该/可以为表格内的内容添加一些填充。

【讨论】：

谢谢！以前从未听说过border-spacing！

【参考方案2】：

这是我的 CSS 修复：

table 
    border:1px solid black;
    border-radius: 5px; //Any radius you want. It will work perfectly!
    border-spacing: 0;

table td:first-child, table td:not(:first-child):not(:last-child)
    border-right:1px solid black;

table tr:first-child td, table tr:not(:last-child) td 
    border-bottom:1px solid black;


table thead tr:first-child  td:first-child 
    -webkit-border-top-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    border-top-left-radius: 2px;


table thead tr:first-child  td:last-child 
    -webkit-border-top-right-radius:2px;
    -moz-border-radius-topright: 2px;
    border-top-right-radius: 2px;

table tbody tr:last-child  td:first-child 
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-bottom-left-radius: 2px;


table tbody tr:last-child  td:last-child 
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    border-bottom-right-radius: 2px;