必须使用border-collapse:collapse实现table外框实线与单元格内边框虚线的协调显示；仅设table实线和td虚线无效，需通过单边控制（如border-bottom）并禁用border-spacing，避免错位、断线或重叠。
table外框实线 + 单元格内边框虚线怎么写
必须用 border-collapse: collapse，否则实线外框和虚线内框会错位、重叠或显示双线。只给 table 设实线、td 设虚线是无效的——浏览器默认分离模型下，两者不共享边框位置。
-
table上设border: 2px solid #333，同时加border-collapse: collapse -
th, td统一设border-bottom: 1px dashed #999（或border-right），不要全方向设，避免与外框冲突 - 如果需要表头底部实线+数据行底部虚线，用
th { border-bottom: 2px solid #333; }+td { border-bottom: 1px dashed #999; } - 禁用
border-spacing：设为0，否则虚线会被撑开、断裂
为什么 border-style: dashed 和 solid 混用容易断线
虚线段长和间隙由浏览器按像素对齐自动计算，而实线无此节奏约束。当同一元素上同时存在实线和虚线（比如 border: 1px solid #000; border-bottom: 1px dashed #666），bottom 边会覆盖原 border，但虚线起始点可能因渲染精度偏移 0.5px，导致首尾断开或局部消失。
- 避免在同一个
td上混用border简写和单边属性（如border: 1px solid;+border-bottom: 1px dashed;） - 正确做法：用单边控制，例如只设
border-bottom和border-right，其余为none - 高 DPI 屏幕（如 Retina）下，1px 虚线更易模糊，建议虚线统一用
2px，实线保持1px或2px以视觉平衡
th 实线顶边 + td 虚线底边的常见写法
这是最常被用来区分表头与数据行的组合，但需注意 th 默认有背景色和加粗，若再叠加实线顶边，容易让顶部显得过重；而 td 的虚线底边若未对齐，会在行间形成“虚实错位”感。
th { border-top: 2px solid #444; border-bottom: none; }td { border-bottom: 1px dashed #aaa; }- 最后一行
td不要画底边：用tr:last-child td { border-bottom: none; } - 确保所有
th和td的padding一致，否则虚线垂直位置会参差
border-radius 和虚线/实线共存时的坑
border-radius 会让虚线在圆角处截断或拉伸变形，尤其当虚线段长小于圆角半径时，浏览器可能直接放弃绘制该段虚线，只剩实线拐角。
- 圆角值建议 ≤
border-width的 2 倍（例如边框 2px，border-radius不超过 4px） - 实线外框可用
border-radius，但内部虚线边框（如border-bottom）应禁用圆角，否则无效 - 若必须整体圆角+虚线，改用伪元素
::after绘制外框，绕过原生边框渲染限制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
