要给表格单元格上的内部边框设置半径,可以使用CSS样式来实现。以下是一个例子:
HTML代码:
单元格1
单元格2
单元格3
单元格4
CSS代码:
table {
border-collapse: collapse; /* 合并边框 */
}
td {
padding: 10px; /* 设置单元格内边距 */
}
td:first-child {
border-top-left-radius: 10px; /* 左上角半径 */
border-bottom-left-radius: 10px; /* 左下角半径 */
}
td:last-child {
border-top-right-radius: 10px; /* 右上角半径 */
border-bottom-right-radius: 10px; /* 右下角半径 */
}
td:not(:first-child):not(:last-child) {
border-radius: 0; /* 其他单元格不设置半径 */
}
/* 可选样式:设置边框颜色和宽度 */
td {
border: 1px solid black;
}
在上述代码中,我们首先使用border-collapse: collapse;
来合并单元格边框。然后,通过设置单元格内边距padding
来给单元格内部留出一些空间。接下来,使用:first-child
和:last-child
选择器来分别给第一个和最后一个单元格设置圆角半径。border-top-left-radius
和border-bottom-left-radius
用于设置左边的单元格,border-top-right-radius
和border-bottom-right-radius
用于设置右边的单元格。最后,使用:not(:first-child):not(:last-child)
选择器来排除第一个和最后一个单元格,然后使用border-radius: 0;
来取消其他单元格的半径设置。
你可以根据需要修改CSS样式中的数值,以达到你想要的效果。