Question

我想要创建的内容：

每个li - 元素
通过调整CSS或使用的图像/ SVG，可以改变点之间的大小和边距。
ul的宽度具有响应性，因此边框的宽度也会有所不同
调整视口大小时不应剪切/截断点，这意味着只能看到完整的cirlces

tl;博士：在调整视口大小时，我不希望发生（看到最后一个点？）：

我无法想出一种方法来创建它：

重复背景图片
巨大（非常长）的背景图片
边界图像

我得到了什么：

我找到了解决问题的方法，但它真的很烦人。它有效，但我必须生成数百个（不必要的）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）。

Answer 2

以下是使用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>

Answer 3

使用其他浏览器进行简单直接的测试，然后再回复我 [测试了firefox chrome opera和ie 11。。检查它是否全屏使用并调整浏览器大小

round：图像拼贴以填充区域，并在必要时重新缩放以避免分割拼贴。

＆＃13;

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;
}

＆＃13;

<ul>
  <li>First Element</li>
  <li>second Element</li>
  <li>third Element</li>
</ul>

＆＃13;

Answer 4

我只需在每个<hr/>上方添加<ul>标记这是你追求的东西吗？

<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;
}

Answer 5

＆＃13;

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;
}

＆＃13;

<ul>
  <li class="small">1st list item</li>
  <li class="large">2n list item</li>
  <li class="small">3rd list item</li>
</ul>

＆＃13;

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

5 个答案: