css - 有没有一种干净的方法可以在纯 CSS 中获得边框？

Question

我想在 a 上设置背景和圆角边框<tbody/>，例如

tbody { border-radius: 15px; border: 1px solid black; background: #ccf; }

然而，当我在Codepen中尝试这个时，边框和背景颜色显示，但<tbody/>仍然有方角。

我可以使用一系列:last-child和:first-child选择器将半径应用于td角落上的单个 s 来解决这个问题，例如

tbody tr:first-child td:first-child { border-top-left-radius: 15px; }

这个版本做了我想要-moz-的（至少，在 Firefox 下），但也感觉非常冗长和 hacky，当我添加前缀版本以实现兼容性（等）时，这个问题只会变得更糟-webkit-，并且支持<th/>除了<td/>. 是否有一种简洁、纯 css 的方式来获得这种行为？

Answer 1

假设您已经折叠了表格中的边框，只需设置display:block并tbody应用border-radius.

代码笔示例

CSS

table {
    width: 100%;
    border-collapse: collapse;
    display: block;
    width: 600px;
}

tbody {
    background: #ccf;
    border: 1px solid black;
    border-radius: 15px;
    display: block;
}

th, td {
    width: 200px;
}

td, th {
    padding: 5px;
    text-align: center;
}