双栏布局边框对不齐需先检查display类型与border-collapse适用性：flex/grid布局中border-collapse无效，须单独设置子元素border；表格布局才需border-collapse:collapse；双线分隔应避免双栏同设border而改用gap+单边border或divider元素；双线边框不兼容border-radius，响应式下须确保border-width≥3px且显式声明border-color。
双栏布局里边框对不齐？先检查 display 和 border-collapse
双栏布局本身不自带边框逻辑，边框错位往往是因为容器和子元素的盒模型没对齐。常见现象是左右两栏之间出现多余缝隙、边框粗细不一，或双线边框在交界处断裂。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
关键点在于：如果用 display: flex 或 display: grid 做双栏，border-collapse 完全无效——它只对 <table> 生效。别把它混进 Flex/Grid 的 CSS 里，否则白写。
<ul>
<li>Flex 容器内子元素（如 <code>.left-column）要加边框，必须单独给每个栏设置 border，不能指望父容器“统一画边”
border 是单元格级属性，grid-container 上设 border 只影响外框<table> 模拟双栏），才需要 <code>border-collapse: collapse，且必须同时作用于 <table> 和所有 <code><td>
<h3>想让双栏之间有双线分隔？别用 border-style: double 直接套</h3>
<p><code>border-style: double 在单个元素上生效没问题，但用在双栏交界处会出问题：两栏各自画一条双线，中间留白重叠，视觉上变成四条线+三段空白，根本不是“分隔线”的效果。
真正干净的双栏分隔线，推荐这几种做法：
立即学习“前端免费学习笔记（深入）”；
- 用
gap配合单边border-right：display: grid; grid-template-columns: 1fr 1fr; gap: 0;，然后只给左栏加border-right: 3px double #333 - Flex 布局下，在两栏之间插入一个
<div class="divider"></div>，样式设为width: 3px; background: linear-gradient(90deg, #333, #333);（避免双线渲染不一致） - 绝对不要给左右栏都设
border-left和border-right并期望它们“刚好对齐”——像素级偏移在不同缩放比下必现
双线边框 + 圆角 = 渲染失败？这是浏览器硬限制
border-style: double 和 border-radius 同时使用时，Chrome 和 Firefox 都会丢弃双线中的一条，或让双线在圆角起点/终点处断裂。这不是 bug，是规范未定义的行为。
如果你的双栏容器需要圆角（比如卡片式布局），放弃 double，改用以下任一替代方案：
- 用
box-shadow: inset 0 0 0 2px #333, inset 0 0 0 4px #333模拟双线感（支持圆角） - 双栏外层包一层
<div class="card">，给它设 <code>border-radius和单线边框；双线只画在内部栏目上，避开圆角区域 - 接受现实：双线边框只适用于直角容器。需要圆角就换样式思路，别硬扛
-
border-width≥3px；设成1px或2px时，多数浏览器直接退化为solid -
border-color必须显式声明；继承值、currentColor或transparent都会导致双线不可见 - 推荐写法：
border: 3px double #333，简写自动带全三个维度，不易遗漏
响应式下双线变糊或消失？宽度和颜色缺一不可
很多开发者写了 border-style: double 却没生效，翻来覆去调都没用——大概率是漏了 border-width 或 border-color。
border-style: double 是个“条件触发器”，不是独立样式。浏览器只在满足以下两个条件时才渲染双线：
响应式场景下，3px 在小屏设备上可能过粗，建议用媒体查询动态降级：@media (max-width: 768px) { .sidebar { border-width: 2px; } }——但注意，2px 下 double 依然失效，此时应同步改 border-style: solid。
