css制作路线

使用SVG绘制路线

SVG（可缩放矢量图形）适合绘制精确的路径或复杂路线。通过<path>元素的d属性定义路径点，结合CSS控制样式。

<svg width="400" height="200">
  <path d="M50 100 Q150 20 250 100 T450 100" stroke="#3498db" stroke-width="4" fill="none"/>
</svg>

• stroke：路径颜色
• stroke-width：线条宽度
• fill：设置为none避免闭合填充

使用CSS线性渐变模拟虚线路线

通过linear-gradient创建虚线效果，结合background-size控制间隔。

.dashed-line {
  height: 4px;
  background: linear-gradient(to right, #e74c3c 50%, transparent 50%);
  background-size: 20px 4px;
}

适用于水平或垂直路线，调整to right为to bottom可改为垂直方向。

使用伪元素和边框绘制折线

通过::before或::after伪元素结合border属性实现折线效果。

.route {
  position: relative;
  width: 200px;
  height: 100px;
}
.route::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: 2px solid #2ecc71;
  border-bottom: 2px solid #2ecc71;
}

动画路径效果

为路线添加动画，如流动的虚线或颜色变化。

@keyframes flow {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}
.animated-line {
  height: 3px;
  background: repeating-linear-gradient(to right, #9b59b6, #9b59b6 10px, transparent 10px, transparent 20px);
  animation: flow 1s linear infinite;
}

响应式路线设计

使用百分比或视窗单位（vw/vh）确保路线适应不同屏幕尺寸。

.responsive-path {
  width: 80%;
  height: 2px;
  margin: 0 auto;
  background-color: #f39c12;
}