当前位置：首页 > CSS

css制作虚线

2026-01-28 09:05:59CSS

使用 border-style 属性

在CSS中，通过 border-style 属性可以轻松实现虚线边框。将属性值设为 dashed 即可生成虚线。
示例代码：

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

此方法适用于任何支持边框的元素（如 div、span 等），虚线颜色和宽度可通过 border-color 和 border-width 调整。

自定义虚线样式

若需更灵活的虚线样式（如调整虚线间隔或线段长度），可使用 linear-gradient 背景模拟虚线效果。
示例代码：

.element {
  background: linear-gradient(90deg, #000 50%, transparent 0) repeat-x;
  background-size: 10px 2px;
  background-position: bottom;
  height: 2px; /* 控制虚线高度 */
}

通过 background-size 调整虚线的间隔（10px 为线段长度，2px 为高度），90deg 控制水平或垂直方向。

使用 SVG 绘制虚线

SVG 的 stroke-dasharray 属性可精确控制虚线的线段和间隔长度。
示例代码：

<svg width="200" height="2">
  <line x1="0" y1="1" x2="200" y2="1" stroke="#000" stroke-dasharray="5,3" />
</svg>

stroke-dasharray="5,3" 表示线段长5px、间隔3px。此方法适合需要复杂虚线路径的场景。

伪元素生成虚线

通过 ::before 或 ::after 伪元素结合背景渐变实现虚线，避免影响原有布局。
示例代码：

.element::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, #000 50%, transparent 0);
  background-size: 6px 1px;
}

伪元素的虚线不会占据文档流空间，适合装饰性需求。

css制作虚线