元素的边框折叠问题（不是表格）答案

【问题标题】：border-collapse issue on elements (not table)元素的边框折叠问题（不是表格）
【发布时间】：2021-07-18 08:12:00
【问题描述】：

我一直在尝试获取要合并的元素的边框...我认为边框折叠将是解决此问题的直接方法...但显然不是，或者我在滥用它。

这是我的代码...

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel=stylesheet">
  <link href="style.css" rel="stylesheet"> 
  <title>Responsive Grid</title>
</head>
<body>
  <div class="container">
    <nav>Navbar</nav>
    <main>Main</main>
    <div id="sidebar">Sidebar</div> 
    <div id="content1">Content1</div>
    <div id="content2">Content2</div>
    <div id="content3">Content3</div>
    <footer>Footer</footer>
  </div>
</body>
</html>

style.css：

body {
  box-sizing: border-box;
}
.container > * {
  border:green 1px solid;
  border-collapse:collapse;
}
.container {
  display:grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

我仍然会在元素相遇的地方看到 2px 边框的外观。感谢您的帮助...我查看了一些线程，但没有找到答案。再次感谢！

【问题讨论】：

border-collapse 不适用于非 CSS 表格的任何内容。这包括 CSS 网格。
嗯谢谢...你能建议对非表格元素实现类似的效果吗？

标签： css layout border-collapse

【解决方案1】：

此 sn-p 适用于问题中给出的特定情况（4 列网格中的 7 个元素），方法是使用（简单）方法使各种边界透明，因此不会加倍：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel=stylesheet">
  <link href="style.css" rel="stylesheet"> 
  <style>
body {
  box-sizing: border-box;
}

.container > * {
  border:green 1px solid;
  position: relative;
  overflow: visible;
}

.container > *:nth-child(2), .container > *:nth-child(3), .container > *:nth-child(4), .container > *:nth-child(6), .container > *:nth-child(7) {
  border-left-color: transparent;
}

.container > *:nth-child(5), .container > *:nth-child(6), .container > *:nth-child(7) {
  border-top-color: transparent;
}

.container {  
  display:grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}
</style>
  <title>Responsive Grid</title>
</head>
<body>
  <div class="container">
    <nav>Navbar</nav>
    <main>Main</main>
    <div id="sidebar">Sidebar</div> 
    <div id="content1">Content1</div>
    <div id="content2">Content2</div>
    <div id="content3">Content3</div>
    <footer>Footer</footer>
  </div>
</body>
</html>

更复杂的尝试可以在一般情况下工作 - 例如，伪元素覆盖先前兄弟元素的边框 - 仅在理论上有效，因为单个像素的放置在不同的显示器上可能会有所不同，因此结果可能是半个 (CSS) 像素比如出去。

【讨论】：