CSS中border不支持多值语法，如“1px solid #000, 1px dashed #666”会被忽略；实现虚实边框需通过覆盖单边（如border-top/border-bottom）或伪元素（::after）模拟，且border-width至少2px以确保dashed在缩放下正常显示。
为什么直接写 border: 1px solid #000, 1px dashed #666 不生效
浏览器压根不认这种写法 —— border 是单值属性，不是数组或列表，CSS 规范里没有“多层边框”的语法。所谓“虚实结合”，本质是视觉叠加，不是语法合并。你写的这行代码会被完全忽略，devtools 里看到的 border-style 很可能还是 solid，因为被重置样式或框架默认覆盖了。
border-collapse: collapse 下怎么让某条边显示虚线
在 collapse 模式下，border-image 对 <table> 无效，必须作用在 <td> 或 <th> 上；同时，border-width 不能设为 1px，否则高清屏或缩放后虚线会退化成实线。
- 给
td设基础实线：border: 2px solid #333 - 再用
border-top和border-bottom覆盖为虚线：border-top: 2px dashed #999; border-bottom: 2px dashed #999 - 必须配
border-width: 2px（不能是1px），末尾的1是border-image-slice值，表示不拉伸只平铺 - 若只对第 3 列生效，加 class：
<td class="dashed-top-bottom">，再定义.dashed-top-bottom { ... }
用 ::after 伪元素加虚线分隔线最稳
当你需要在已有实线表格上“额外加一条虚线”（比如表头下方划虚线），伪元素是绕过 border 渲染限制的兜底方案 —— 它不依赖 border-style: dashed，不受 Safari/Chrome 缩放差异影响。
- 给
th加position: relative - 用
th::after绘制横贯虚线：content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, #999, #999 2px, transparent 2px, transparent 4px) - 加
z-index: 1确保盖在内容上，但别遮字；移动端缩放时需实测gap是否变宽 - 不能用
border-bottom直接替代，否则和原有实线边框重叠出双线感
哪些地方最容易被忽略
真正卡住人的往往不是写法，而是渲染链路上的隐性约束：
立即学习“前端免费学习笔记（深入）”；
-
border-width小于2px时，dashed在 Safari 和缩放 125% 的 Chrome 下大概率显示为实线 —— 不是 bug，是像素对齐妥协 - 表格用了
border-collapse: collapse，却还指望border-image在<table>上生效，结果什么都没出来 - 给
<table>加了虚线样式，但 devtools 显示border-style: solid—— 说明被 reset CSS 或框架默认样式覆盖了
