可通过CSS的border属性配合dashed关键字实现虚线边框，支持简写、分项控制、渐变模拟、前缀兼容及响应式适配五种标准写法。
如果您希望在HTML5页面中为某个元素添加虚线边框，则可以通过CSS的border属性配合dashed关键字实现。以下是几种标准且兼容性良好的写法：
一、基础虚线边框写法
使用border简写属性直接定义宽度、样式和颜色，其中dashed表示虚线样式，适用于所有块级与行内元素（需设置display为block或inline-block等）。
1、在CSS中定义类选择器，例如：.dashed-border { border: 1px dashed #000; }
2、在HTML元素中应用该类：
立即学习“前端免费学习笔记（深入）”；
二、分项控制虚线边框
当需要单独设置某一边为虚线（如仅下边框），可使用border-bottom等方向性属性，避免影响其余三边。
1、定义仅下边框为虚线：border-bottom: 2px dashed #333;
2、若需不同颜色或粗细，可分别调整数值与十六进制色值，例如：border-left: 1px dashed #f00;
三、自定义虚线长度与间隔
CSS原生dashed样式由浏览器渲染决定，无法直接控制虚线段长与间隙；但可通过background-image配合repeating-linear-gradient模拟可控虚线效果。
1、设置透明背景并用渐变绘制水平虚线：background-image: repeating-linear-gradient(90deg, #000, #000 5px, transparent 5px, transparent 10px);
2、配合background-size与padding实现单边虚线视觉效果，例如仅顶部：background-size: 10px 1px; background-position: top; background-repeat: repeat-x; padding-top: 1px;
四、兼容性增强写法
针对旧版Safari或某些移动端Webview对dashed支持不稳定的情况，可添加-webkit-border-horizontal-spacing等前缀辅助声明（尽管非标准，但部分环境有效）。
1、添加私有前缀声明：-webkit-border-image: linear-gradient(to right, #000 50%, transparent 50%) 1;
2、同时保留标准写法确保主逻辑生效：border: 1px dashed #000;
五、响应式虚线适配
在不同屏幕尺寸下保持虚线视觉一致性，需避免固定像素值导致小屏过密或大屏过疏，可采用相对单位结合媒体查询调整。
1、使用rem单位定义基础虚线：border: 0.0625rem dashed #000;
2、在大屏设备中增大虚线间隔：@media (min-width: 768px) { .dashed-border { border: 0.125rem dashed #000; } }
