css虚线怎么制作

使用 border-style 属性

在CSS中，直接通过 border-style: dashed 设置边框为虚线样式。示例代码：

.element {
  border: 2px dashed #000;
}

此方法适用于简单的虚线边框，但样式和间距由浏览器默认渲染，不可自定义。

自定义虚线样式（线性渐变）

通过 linear-gradient 模拟虚线效果，可控制虚线间隔和颜色：

.element {
  background: repeating-linear-gradient(
    to right,
    #000 0px,
    #000 5px,
    transparent 5px,
    transparent 10px
  );
  height: 2px; /* 虚线高度 */
}

调整 5px 和 10px 可改变虚线的实线部分和间隔长度。

使用 SVG 作为背景

通过SVG生成虚线背景，实现更精细的控制：

.element {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2h5' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  height: 2px;
}

修改 h5 和 stroke-width 可调整虚线长度和粗细。

伪元素结合背景色

利用 ::before 或 ::after 伪元素生成虚线：

.element::after {
  content: "";
  display: block;
  border-top: 2px dashed #000;
  width: 100%;
}

此方法适合在元素内部或外部添加独立虚线。