Html 如何为响应元素创建重复边框？

我要创建的内容：

• 每个

  li

  -元素顶部的虚线边框
• 点的大小和它们之间的边距可以通过调整CSS或使用的图像/SVG来改变）

• ul

  的宽度是有响应的，因此边框的宽度也会变化
• 调整视口大小时不应剪切/截断点，这意味着只能看到完整的圆环

tl；dr：我不希望在调整视口大小时发生这种情况（看到最后一个点了吗？）：

我想不出一个方法来创建这个使用：

• 重复背景图像
• 巨大（很长）的背景图像
• 边界图像

我得到的：

我想出了一个解决办法，但真的很烦人。它可以工作，但我必须生成数百个（非必需的）

span

-元素，因为我不知道元素的最大宽度

这个想法很简单：不合适的点会漂浮到隐藏的溢出物中

来源

HTML

JSFiddle

---

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

边框图像

对我来说似乎是个不错的方法。您可以控制大小，并指定将重复四舍五入到所需的宽度

li{
字体大小：40px；
}
.小{
边框：实心透明；
边框宽度：15px0；
边框图像：url（“https://mdn.mozillademos.org/files/4127/border.png）27轮；
}
.大{
边框：实心透明；
边框宽度：30px0；
边框图像：url（“https://mdn.mozillademos.org/files/4127/border.png）27轮；
}

第一个列表项
第二个列表项

简单而直接地用其他浏览器测试它，然后回复我 [在firefox chrome opera和ie 11上测试]。要检查它，请全屏使用它并调整浏览器大小

圆形：图像平铺以填充区域，并在必要时重新缩放以避免分割平铺

li{
填充物：5px；
边框样式：虚线；
边框颜色：rgba（213,126,0,1）；
列表样式：无；
边框宽度：15px；
边框图像：url（“http://f.cl.ly/items/0V28170w0f0k3t3S2p0g/dots.svg）33%四舍五入；
边界底部：0；
左边框：0；
右边界：0；
}

第一要素
第二要素
第三要素

下面是一个使用svg的示例：

函数getCenterDotPosition（位置，点宽度）{ 返回（点宽度/2）+（位置）*点宽度*2； } 函数getRightPosition（位置，点宽度）{ 返回getCenterDotPosition（位置，点宽度）+dotWidth/2； } 函数getSVG（选项）{ 变量宽度=options.width； 变量高度=options.dotWidth； var svg=''； 左var； 变量半径=options.dotWidth/2； var i=0； var right=getRightPosition（i，options.dotWidth）； while（右<宽）{ 中心=getCenterDotPosition（i，options.dotWidth）； svg+=''； i++； 右=getRightPosition（i，options.dotWidth）； } svg+=''； 返回svg； } 函数generateDots（）{ 变量选项={ 宽度：$（'ul'）.first（）.innerWidth（）， 点宽度：2， 颜色：“灰色” }; var svg=getSVG（选项）； $（'li svg.top dot'）。删除（） $（'li'）.prepend（svg）； } generateDots（）； $（窗口）。调整大小（函数（）{ generateDots（）； });

ul{
保证金：0；
填充：0；
列表样式：无；
线高：60px；
宽度：50%；
}
顶点{
显示：块；
}

项目1
项目2

我只需在每个

上面添加一个
标签

这是你想要的东西吗

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



hr{
  width:100%;
  color:#333;
  border-top: dotted 3px;
}

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




项目1



项目2

人力资源{
宽度：100%；
颜色：#333；
边框顶部：虚线3px；
}
ul>li div span{
浮动：左；
宽度：2倍；
高度：2倍；
利润率：0.4px 0；
背景：灰色；
}

li{
字体大小：40px；
}
.小{
边框：实心透明；
边框宽度：15px0；
边框图像：url（“http://i.stack.imgur.com/Esozt.jpg）30轮；
}
.大{
边框：实心透明；
边框宽度：30px0；
边框图像：url（“http://i.stack.imgur.com/Esozt.jpg）30轮；
}

第一个列表项
2n列表项
第三个列表项
这就是你在“不切点”背后的数学？应该有多少个点比可见的多？当元素调整大小时，点会发生什么情况？@RokoC.Buljan我的（天真的）解决方案只是在元素不合适时将其浮动到一个不可见的新行中。所以这些点永远不会被视觉切割。@RokoC.Buljan我希望尽可能多的点是可见的（比如边框）。在小提琴中调整预览大小时，可以看到效果。这与重复背景图像时相同。是的，仅可使用元素进行“点”包装。重复的图像/SVG不知道它们的“点”，所以。。。。恐怕这是不可能的。使用放射状背景的示例：<但是的，这是一张图像，因此被切断。@RokoC.Buljan“AFIAK，这是不可能的”-哦，天哪，似乎是这样。我也想不出别的解决办法。对于非常小的点，这不是一个问题，但对于较大的元素，它开始看起来更细。谢谢你的帮助和耐心，我的措辞。谢谢，这是接近。似乎它在Safari中不能正常工作。另外，Firefox在调整大小时的倾斜也是相对极端的。Chrome让它看起来更流畅。firefox的显示对我来说还行。。。可能取决于FF版本？尽管它在Safari 8（未测试9）中不起作用，但仍然是最好的解决方案-不幸的是。再次感谢。谢谢你的努力。尽管这可能会起作用，但它的开销甚至比问题中的解决方案还要大
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;
}

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



hr{
  width:100%;
  color:#333;
  border-top: dotted 3px;
}

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