CSS | 边框折叠属性

简介

边框折叠是CSS中一种特殊的边框行为，它用于控制相邻的边框如何进行合并和重叠。边框折叠属性可以应用于相邻的表格单元格、表格行和一些块级元素的嵌套边框。

语法

border-collapse: collapse | separate

• collapse：合并相邻边框，使它们重叠。
• separate：保持相邻边框分开，不重叠。

用法

边框折叠属性通常用于表格布局，可以通过在<table>元素上应用该属性来控制表格中相邻单元格的边框行为。

table {
  border-collapse: collapse;
}

如果边框折叠属性设置为collapse，相邻单元格的边框会合并为单一的边框，相邻边框的宽度将被合并，并且边框只会沿着表格的外部周边绘制。

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid black;
}

如果边框折叠属性设置为separate，相邻单元格的边框将保持分开，不会合并成单一的边框。

table {
  border-collapse: separate;
  border-spacing: 5px;
}

td {
  border: 1px solid black;
}

注意事项

• 边框折叠属性只适用于具有相邻边框的元素，如果元素没有相邻边框则不会产生任何效果。
• 默认情况下，大多数浏览器都将边框折叠属性设置为separate，但在某些情况下，如表格布局中，将其设置为collapse可以实现更紧凑的边框风格。

以上是关于CSS边框折叠属性的介绍，希望对你有所帮助！