如何移除SVG描边生成的容器顶部虚线边框？

你之前用border-top: 0没用是因为这个边框是SVG背景里的<rect>整体描边生成的，CSS的border属性管不到它。要去掉顶部边框，得修改SVG内容，别用矩形整体描边，改成单独绘制左、右、下三条边框线。

直接替换你CSS里的background-image即可，修改后的代码如下：

div {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0' y1='0' x2='0' y2='100%25' fill='none' stroke='%23D8D8D8' stroke-width='2' stroke-dasharray='10%2c 18' stroke-linecap='square'/%3e%3cline x1='100%25' y1='0' x2='100%25' y2='100%25' fill='none' stroke='%23D8D8D8' stroke-width='2' stroke-dasharray='10%2c 18' stroke-linecap='square'/%3e%3cline x1='0' y1='100%25' x2='100%25' y2='100%25' fill='none' stroke='%23D8D8D8' stroke-width='2' stroke-dasharray='10%2c 18' stroke-linecap='square'/%3e%3c/svg%3e");
  width: 100%;
  min-height: 400px;
  padding-bottom: 20px;
}

<div></div>

说明： #

• 用三个<line>分别绘制左、右、下三条边框，完全去掉顶部的线，就不会有顶部边框了
• 每条线的stroke-dasharray保持你原来的10, 18，保证虚线样式和之前一致
• 保留了原有的颜色#D8D8D8、线宽2、端点样式square，视觉效果和原边框匹配

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