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

概述我想要创建的内容： >每个li元素顶部的虚线边框 >通过调整CSS或使用的图像/ SVG,可以改变点的大小和它们之间的边距 > ul的宽度是响应的,因此边框的宽度也会变化 调整视口大小时不应剪切/截断点,这意味着只有完整的cirlces应该是可见的 tl; dr：在调整视口大小时,我不希望发生这种情况(请参阅最后一个点？)： 我想不出一种方法来创建这个： >重复的背景图像 >一个巨大的(非常长的) 我想要创建的内容：

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

tl; dr：在调整视口大小时,我不希望发生这种情况(请参阅最后一个点？)：

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

>重复的背景图像
>一个巨大的(非常长的)背景图像
>边界图像

我得到了什么：

我找到了解决问题的方法,但这真的很烦人.它可以工作,但我不得不生成数百个(不必要的)span-elements,因为我不知道元素的最大宽度.

这个想法非常简单：不适合的点,浮入隐藏的溢出.

资源

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或渐变技巧？

解决方法 边界图像似乎是去找我的方式.您可以控制大小,并指定将重复舍入为所需宽度.

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 >First List item</li>  <li >Second List item</li></ul>

我在这里使用了来自MDN网站的菱形PNG,但是您应该能够轻松地创建具有所需点形状的PNG(或SVG).

总结

以上是内存溢出为你收集整理的html – 如何为响应元素创建重复边框？全部内容，希望文章能够帮你解决html – 如何为响应元素创建重复边框？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。