如何为响应元素创建重复边框？
我想创造什么：如何为响应元素创建重复边框？
- 一个虚线边框它们之间的点和边缘的每一
li- 元素 - 大小的顶部可以通过调整CSS或使用的图像/ SVG改变）
- 的
ul的宽度是有求必应，所以边框的宽度变化，也调整视口，这意味着只有充分cirlces应该是可见的，当 - 点不应该被剪切/截断
tl; dr：我不想让这个发生（看到最后一个点？）调整视口时：
- 重复背景图像
- 一个巨大的（很长）的背景图像 ：
- border-image
我不能想办法用这个来创建
我得到了：
我想出了一种方法来解决它，但它真的很烦人。它的工作原理，但我不得不生成数百（不必要的）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
有没有办法解决这个问题，喜欢用一些漂亮的SVG-或梯度招一个优雅的方式是什么？
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>我已经使用了菱形形态PNG从MDN网站在这里，但你应该能够与你想要的网点形状创建一个PNG（或SVG）很轻松了。
简单和直接用浏览器的其他测试，并回到我 [测试火狐铬歌剧和IE 11]。要检查它使用它在全屏和调整浏览器
圆形：图像拼贴填充区域，并在必要时重新缩放以避免分割拼贴。
li {
padding: 5px;
border-style: dotted;
border-color: rgba(213, 126, 0, 1);
list-style: none;
border-width: 15px;
border-image: url("http://f.cl.ly/items/0V28170w0f0k3t3S2p0g/dots.svg") 33% round;
border-bottom: 0;
border-left: 0;
border-right: 0;
}<ul>
<li>First Element</li>
<li>second Element</li>
<li>third Element</li>
</ul>
下面是使用SVG的例子：
function getCenterDotPosition(position, dotWidth) {
return (dotWidth/2) + (position) * dotWidth * 2;
}
function getRightPosition(position, dotWidth) {
return getCenterDotPosition(position, dotWidth) + dotWidth/2;
}
function getSVG(options) {
var width = options.width;
var height = options.dotWidth;
var svg = '<svg class="top-dot" width="' + width + 'px" height="' + height + 'px">';
var left;
var radius = options.dotWidth/2;
var i = 0;
var right = getRightPosition(i, options.dotWidth);
while(right < width) {
center = getCenterDotPosition(i, options.dotWidth);
svg += '<circle cx="' + center + '" cy="' + radius + '" r="' + radius + '" stroke="none" stroke-width="0" fill="' + options.color + '" />';
i++;
right = getRightPosition(i, options.dotWidth);
}
svg += '</svg>';
return svg;
}
function generateDots() {
var options = {
width : $('ul').first().innerWidth(),
dotWidth : 2,
color : 'grey'
};
var svg = getSVG(options);
$('li svg.top-dot').remove()
$('li').prepend(svg);
}
generateDots();
$(window).resize(function() {
generateDots();
});ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 60px;
width: 50%;
}
svg.top-dot {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>感谢您的努力。即使这可能会起作用，但问题的解决方案甚至更加昂贵，在这种情况下，我可以简单地将JavaScript中的大约100个元素克隆到需要的隐藏空间中。没有代码需要运行，我总是把它看作是最后的手段。但仍然是一个简洁的解决方案，可以使其更加通用。 – lampshade
我简单地添加每个<ul>上方的<hr/>标签。
这是你之后的事情吗？
<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;
}
li {
font-size: 40px;
}
.small {
border: solid transparent;
border-width: 15px 0 0;
border-image:url("http://i.stack.imgur.com/Esozt.jpg") 30 30 round;
}
.large {
border: solid transparent;
border-width: 30px 0 0;
border-image:url("http://i.stack.imgur.com/Esozt.jpg") 30 30 round;
}<ul>
<li class="small">1st list item</li>
<li class="large">2n list item</li>
<li class="small">3rd list item</li>
</ul>
这就是你的数学背后的*不切点*？应该显示多少个点？当元素调整大小时，会发生什么？ –
@ RokoC.Buljan我只是简单地将元素浮动到一个看不见的新行，一旦他们不适合。所以这些点不会被切断。 – lampshade
@ RokoC.Buljan我希望尽可能多的点可见（如边框）。当您在小提琴中调整预览大小时，您可以看到效果。与重复背景图像时相同。 – lampshade