table 元素直接用 border: 1px dashed #333 会失效，因 html 表格默认启用 border-collapse: collapse，导致 table 自身边框被忽略；需改为给 td/th 设边框，或显式设 border-collapse: separate 并配 border-spacing: 0。
table 元素直接用 border: 1px dashed #333 会失效？
直接给 <table> 写 <code>border: 1px dashed #333 在多数浏览器里确实不生效，不是你写错了——而是 HTML 表格默认启用了 border-collapse: collapse（即使没显式声明），此时边框由 <td>/<code><th> 承担，<code><table> 自身的 border 被忽略。
<p>解决办法只有两个：要么关掉合并，要么把虚线边框加到单元格上。</p>
<ul>
<li>关合并：<code>table { border-collapse: separate; }，再配 border: 1px dashed #333
td 和 th 设边框，例如 td, th { border: 1px dashed #666; }
table { border: 1px dashed #999; } + border-collapse: separate; + border-spacing: 0;
用 style 属性内联写虚线边框，颜色总不对？
常见现象：写了 style="border: 1px dashed red"，但颜色看起来是灰色或继承了父级文字色。原因有两个：
-
border-color不写时，默认取当前color值，不是黑色；如果父容器设了color: #777，虚线就跟着变灰 - 内联样式里漏了单位或空格，比如写成
border:1pxdashed#f00（没空格）→ 浏览器解析失败，退回到默认 - 简写顺序错乱，如
border: dashed 1px #f00→ 部分旧浏览器不认，推荐固定为border: 1px dashed #f00
实操建议：内联时务必写全三要素，且用空格隔开，颜色用十六进制或 rgba() 更可控。
只想让表格某一边是虚线，比如只有下边框？
别用 border: none 再单独开一边——那样容易漏掉其他边的重置。正确做法是精准控制单边属性：
-
border-bottom: 1px dashed #007bff;（只设底边） -
border-top-style: dashed; border-top-width: 1px; border-top-color: #007bff;（拆开写更易维护） - 如果同时要圆角和虚线，
border-radius别超过border-width的 2 倍，否则虚线在拐角处断裂或堆叠 - 注意：
border-bottom这类单边简写会自动重置该边的style、width、color，不影响其他三边
虚线太稀疏或太密，能调间隔吗？
border-style: dashed 本身不提供「实线长度 / 空隙长度」调节能力，所有浏览器按内部算法渲染，无法像素级控制。如果你看到不同浏览器虚线密度差异大，说明你没显式设 border-width —— 默认 medium（约 3px）在各引擎解释不一致。
真正可控的方案只有两个：
- 接受标准
dashed，但强制指定宽度：比如统一用border-width: 2px，至少保证节奏相对稳定 - 需要精确控制（如 4px 实 + 8px 空），必须放弃
border，改用background-image: repeating-linear-gradient(...)配合伪元素或额外 wrapper
后者代码量多、兼容性略低，但唯一能绕过浏览器黑盒渲染的方式。日常项目里，老老实实写 border: 1px dashed #999 并显式声明宽和色，反而最省心也最可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
