使用CSS的border-style: dashed属性可实现虚线效果，通过div或hr标签结合样式设置，能创建不同方向和样式的虚线，如横虚线、竖虚线，常用border-top或border-left等控制方向，配合width和height调整尺寸。
在HTML和CSS中，想要绘制虚线效果，主要通过CSS的 border-style: dashed 属性来实现。HTML本身不直接支持绘制线条样式，但结合CSS可以轻松创建各种虚线边框。
使用 border-style:dashed 绘制虚线
最常见的方法是给元素设置边框，并将边框样式设为 dashed（虚线）：
说明：创建一个没有高度的 div，只显示顶部虚线边框，视觉上就是一条横虚线。
绘制不同方向的虚线
你可以控制任意一边的边框为虚线：
立即学习“前端免费学习笔记（深入）”；
- 上边框虚线：border-top: 2px dashed #000;
- 下边框虚线：border-bottom: 2px dashed #000;
- 左边框虚线：border-left: 2px dashed #000;
- 右边框虚线：border-right: 2px dashed #000;
例如画一条垂直虚线：
调整虚线样式
dashed 只是其中一种边框样式，你还可以尝试：
- dotted：点状线
- dashed：短划线（常用虚线）
- solid：实线
虚线的长度和间距由浏览器默认控制，无法直接自定义单个“划”的长度，但可通过 border-width 调整粗细影响视觉效果。
使用 hr 标签配合CSS画横虚线
语义化地表示水平分隔线时，可使用 hr 标签并自定义样式：
注意：先用 border: none 去掉默认样式，再重新定义 border-top。
基本上就这些。使用 border-style: dashed 是HTML中实现虚线最简单有效的方式，灵活结合 div、hr 等标签即可满足大多数场景需求。
