CSS stroke-dasharray与长短相间的虚线框实例页面

展示

代码

• HTML：

  <svg>
      <rect x="10" y="10" width="280" height="130"></rect>
  </svg>
  
  <svg>
      <circle cx="150" cy="75" r="60"></circle>
  </svg>

• CSS：

  rect,
  circle {
      fill: none;
      stroke: deepskyblue;
      stroke-width: 4px;
      stroke-dasharray: 14px 4px 4px 4px;
  }