如何使用CSS conic-gradient绘制重复的水平虚线？

单条水平虚线 #

用线性渐变即可简单实现，代码如下：

.single-dashed-line {
  height: 2px; /* 控制虚线的粗细 */
  background: linear-gradient(to right, #333 50%, transparent 50%);
  background-size: 12px 100%; /* 第一个值=实线长度+透明间隔，第二个值与元素高度一致 */
}

• 原理：通过linear-gradient定义一段实色+一段透明的基础单元，再用background-size控制单元尺寸，让背景自动重复平铺形成连续虚线。
• 调整虚实比例：比如想让实线更短，把渐变里的50%改成30%，同时把background-size的第一个值改成你想要的单元总宽度（比如10px=3px实线+7px透明）。

多条平行水平虚线 #

如果需要示例图那样的多条水平虚线，只需让背景垂直重复：

.multiple-dashed-lines {
  height: 100px; /* 容器高度，控制虚线的显示范围 */
  background: linear-gradient(to right, #333 50%, transparent 50%) repeat-y;
  background-size: 12px 18px; /* 12px=虚线单元宽度，18px=两条虚线的垂直间距+线条高度 */
}

• repeat-y让基础单元沿垂直方向重复，实现多条平行虚线；调整background-size的第二个值可以控制虚线之间的垂直间距。

自定义虚实混合的水平线条 #

如果需要实线和虚线交替的复杂样式，可通过多断点渐变实现：

.solid-dashed-mix {
  height: 2px;
  background: linear-gradient(
    to right,
    #333 25px, /* 25px实线 */
    transparent 25px, transparent 35px, /* 10px透明间隔 */
    #333 35px, #333 60px, /* 25px实线 */
    transparent 60px, transparent 70px /* 10px透明间隔 */
  );
  background-size: 70px 100%; /* 重复单元总宽度70px */
}

内容的提问来源于stack exchange，提问作者NIge