如何使用CSS实现虚线波浪背景线条效果

你要实现的是下图所示的波浪虚线背景效果：

border的dashed属性只能实现直线虚线，没法做出波浪的弯曲效果，推荐两种实现方案：

• 方案1：内联SVG背景（兼容性最优，调整灵活）
  直接将SVG路径内置为背景图，不需要额外引入文件，示例代码如下：

  .target-div {
    width: 100%;
    height: 300px;
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q 20 30, 40 50 T 80 50' fill='none' stroke='%23e0e0e0' stroke-width='1.5' stroke-dasharray='3 3' /%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: bottom left;
  }
  

  你可以按需调整参数匹配你的设计需求：

  • 修改stroke属性的色值调整线条颜色
  • 修改stroke-dasharray的两个数值分别调整虚线单段长度、段与段的间距
  • 修改d路径里的数值调整波浪的弧度、高度
  • 修改background-position调整波浪在容器内的位置

• 方案2：纯CSS实现（无SVG依赖）
  利用重复渐变和mask遮罩组合实现效果，示例代码如下：

  .target-div {
    width: 100%;
    height: 300px;
    /* 虚线样式：实线长4px，间距2px */
    background: repeating-linear-gradient(90deg, #e0e0e0 0, #e0e0e0 4px, transparent 4px, transparent 6px);
    /* 波浪遮罩，调整参数修改波浪大小弧度 */
    mask: radial-gradient(circle at 10px 12px, transparent 10px, #000 11px) repeat-x left bottom;
    mask-size: 20px 20px;
    -webkit-mask: radial-gradient(circle at 10px 12px, transparent 10px, #000 11px) repeat-x left bottom;
    -webkit-mask-size: 20px 20px;
  }
  

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