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> 无效，必须作用在 <code><td> 或 <code><th> 上；同时，<code>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">，再定义 <code>.dashed-top-bottom { ... }用
::after伪元素加虚线分隔线最稳当你需要在已有实线表格上“额外加一条虚线”（比如表头下方划虚线），伪元素是绕过
border渲染限制的兜底方案 —— 它不依赖border-style: dashed，不受 Safari/Chrome 缩放差异影响。
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给
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> 上生效，结果什么都没出来 <li>给 <code><table> 加了虚线样式，但 devtools 显示 <code>border-style: solid—— 说明被 reset CSS 或框架默认样式覆盖了
- 给
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
