css 制作虚线
使用 border 属性创建虚线边框
通过设置 border-style 为 dashed 可以快速创建虚线边框。这种方法适用于任何具有边框的元素，例如 div、button 或 input。
.dashed-border {
border: 2px dashed #000;
}自定义虚线样式
如果需要更精细的控制虚线外观，可以使用 border-image 属性配合 SVG 或线性渐变来创建自定义虚线样式。
.custom-dash {
border: 2px solid transparent;
border-image: repeating-linear-gradient(45deg, #000, #000 5px, transparent 5px, transparent 10px) 10;
}使用 background 属性创建虚线效果
对于非边框的虚线效果，可以通过背景线性渐变实现。这种方法适合在元素内部创建水平或垂直虚线。
.horizontal-dash {
background: repeating-linear-gradient(to right, #000, #000 5px, transparent 5px, transparent 10px);
height: 2px;
}使用伪元素创建虚线
通过 ::before 或 ::after 伪元素可以创建更复杂的虚线效果，这种方法特别适合需要精确定位虚线的情况。
.element::after {
content: "";
display: block;
border-top: 2px dashed #000;
width: 100%;
position: absolute;
bottom: 0;
}控制虚线间距和大小
通过调整 border-width 和颜色可以改变虚线的粗细和外观。不同的颜色和宽度组合会产生不同的视觉效果。
.thick-dashed {
border: 4px dashed rgba(0, 0, 0, 0.5);
}响应式虚线设计
使用相对单位如 vw 或百分比可以使虚线响应不同屏幕尺寸。这种方法确保虚线在各种设备上保持比例一致。
.responsive-dash {
border: 0.5vw dashed #000;
}
