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;
}