双栏布局边框对不齐需先检查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 完全无效——它只对 生效。别把它混进 Flex/Grid 的 CSS 里，否则白写。
.left-column）要加边框，必须单独给每个栏设置 border，不能指望父容器“统一画边”border 是单元格级属性，grid-container 上设 border 只影响外框 模拟双栏），才需要
border-collapse: collapse，且必须同时作用于 和所有
想让双栏之间有双线分隔？别用 border-style: double 直接套
border-style: double 在单个元素上生效没问题，但用在双栏交界处会出问题：两栏各自画一条双线，中间留白重叠，视觉上变成四条线+三段空白，根本不是“分隔线”的效果。
gap 配合单边 border-right：display: grid; grid-template-columns: 1fr 1fr; gap: 0;，然后只给左栏加 border-right: 3px double #333
，样式设为 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 模拟双线感（支持圆角）border-radius 和单线边框；双线只画在内部栏目上，避开圆角区域
响应式下双线变糊或消失？宽度和颜色缺一不可
border-style: double 却没生效，翻来覆去调都没用——大概率是漏了 border-width 或 border-color。border-style: double 是个“条件触发器”，不是独立样式。浏览器只在满足以下两个条件时才渲染双线：
border-width ≥ 3px；设成 1px 或 2px 时，多数浏览器直接退化为 solid
border-color 必须显式声明；继承值、currentColor 或 transparent 都会导致双线不可见border: 3px double #333，简写自动带全三个维度，不易遗漏3px 在小屏设备上可能过粗，建议用媒体查询动态降级：@media (max-width: 768px) { .sidebar { border-width: 2px; } }——但注意，2px 下 double 依然失效，此时应同步改 border-style: solid。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
