html - 如何为响应式元素创建重复边框？

Question

我要创建的内容:

• 每个 li 元素顶部的虚线边框
• 点的大小和它们之间的边距可以通过调整 CSS 或使用的图像/SVG 来改变)
• ul 的宽度是响应式的，因此边框的宽度也会变化
• 调整视口(viewport)大小时不应剪切/截断点，这意味着应该只显示完整的圆

tl;dr:我不希望在调整视口(viewport)大小时发生这种情况(看到最后一个点了吗？):

我想不出创建它的方法:

• 重复的背景图片
• 一张巨大(很长)的背景图片
• 边框图片

我得到了什么:

我想出了一个办法来解决它，但它真的很烦人。它有效，但我必须生成数百个(不重要的)span 元素，因为我不知道元素的最大宽度。

这个想法非常简单:不适合的点，漂浮到隐藏的溢出中。

来源

HTML

<ul>
  <li>
    <div>
      <span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
    Item 1
  </li>
  <li>
    <div>
      <span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
    Item 2
  </li>
</ul>

CSS

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 60px;
}

ul > li div {
  overflow: hidden;
  height: 2px;
}

ul > li div span {
  float: left;
  width: 2px;
  height: 2px;
  margin: 0 4px 0 0;
  background: grey;
}

JSFiddle

You can try it here

有没有一种经典的方法来解决这个问题，比如使用一些不错的 SVG 或渐变技巧？

Answer 1

border-image 似乎适合我。您可以控制大小，并指定将重复四舍五入到您想要的宽度。

li {
  font-size: 40px;
}

.small {
  border: solid transparent;
  border-width: 15px 0 0;
  border-image:url("https://mdn.mozillademos.org/files/4127/border.png") 27 27 round;
}

.large {
  border: solid transparent;
  border-width: 30px 0 0;
  border-image:url("https://mdn.mozillademos.org/files/4127/border.png") 27 27 round;
}

<ul>
  <li class="small">First list item</li>
  <li class="large">Second list item</li>
</ul>

我在这里使用了来自 MDN 站点的菱形 PNG，但您应该能够很容易地创建具有所需圆点形状的 PNG(或 SVG)。