border: 1px dashed #000 有时不可见，因虚线渲染需同时满足三条件：明确宽度、dashed样式及非透明颜色，且元素须有尺寸或内容撑开盒模型；表格中要连续虚线需配合border-collapse: collapse并为th/td统一设边框。
border: 1px dashed 是最直接有效的写法，但“漂亮”不只取决于样式值，更取决于宽度、颜色、元素尺寸和上下文渲染逻辑——尤其在表格、图片或小尺寸元素上，虚线容易断裂、错位或不可见。
为什么 border: 1px dashed #000 有时根本看不到？
虚线边框需要三个条件同时满足才能渲染：有明确的边框宽度、样式为 dashed、且有非透明颜色。但更重要的是——元素必须有尺寸或内容撑开盒模型。
-
<div></div>默认高度为 0，border会存在但不可见；加height: 20px或padding: 10px才能看见 - 行内元素（如
<span>、<a>）默认不响应border的垂直方向，需先设display: inline-block或block - 图片是
inline元素，直接加border可能导致底部留白（基线对齐问题），建议加vertical-align: top或display: block
怎么让虚线边框在表格里连续不中断？
表格不是单个元素，而是由 <table>、<th>、<td> 多层边框共同参与渲染。只给 <table> 加 border，你看到的只是外框；想让整个表格呈现统一虚线，必须控制边框合并行为。
- 要外框+内线都虚线：统一写
table, th, td { border: 1px dashed #999; }，并保持border-collapse: separate（默认），再设border-spacing: 0 - 只要外框虚线、内部无边框：用
table { border: 1px dashed #666; border-collapse: collapse; }+th, td { border: none; } - 避免虚线在拐角处断裂：圆角值别超过边框宽度的 2 倍，例如
border: 2px dashed #ddd; border-radius: 4px是安全上限
怎么微调虚线段长和间隙？
原生 dashed 不支持参数调节，浏览器按自身算法渲染，不同引擎（Chrome/Firefox/Safari）节奏可能不一致。真要控制虚线密度，得绕过 border。
立即学习“前端免费学习笔记（深入）”；
- 用
background-image模拟：background-image: repeating-linear-gradient(90deg, #000, #000 6px, transparent 6px, transparent 12px);然后配padding或伪元素定位到边缘位置 - 用
border-image+ 线性渐变：border: 4px solid; border-image: linear-gradient(to right, #000 50%, transparent 50%) 1;注意必须设border-image-slice: 1，否则图案会被拉伸变形 - 高 DPI 屏幕（如 Retina）下虚线易糊：加媒体查询提升边框宽度，并用
box-shadow补强清晰度，例如：@media (-webkit-min-device-pixel-ratio: 2) { .dashed { border-width: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); } }
哪些场景该避开 border 改用其他方案？
当虚线仅作视觉装饰、不参与布局或交互时，border 反而容易带来副作用。
- 图片卡片想加虚线又怕挤占网格间距？用
outline: 2px dashed #007bff; outline-offset: 4px;—— 不占 layout 空间，但无法设圆角 - 需要双虚线效果？
border+outline组合最轻量，但要注意outline默认居中渲染，加margin: -2px可微调对齐 - 表格外框虚线但内容要居中留白？别硬塞
padding在<table>上（会撑宽），改用伪元素::after绝对定位画一圈虚线，完全可控
虚线边框真正的复杂点不在语法，而在它和盒模型、渲染引擎、设备像素比之间的隐式耦合——写完 dashed 后，务必在真实设备和不同缩放比例下检查是否断裂、偏移或消失。
