html - 点状树状结构

Question

我在边框虚线样式上遇到跨浏览器问题。我通过使用 border style dotted 创建了一个或多个点但它在 chrome 上运行得很好。但在 Firefox 中它不会工作。那么在所有浏览器上实现它的更好主意是什么？

我不能更改我只能从 css 制作的标记

Here is fiddle

和期望的结果。

.span:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 0;
    height: 4px;
    border-top: 4px dotted #333;
    overflow: hidden;
}
.span {
    position: relative;
}

.level-1 {
    padding-left: 12px;
    
    &:before {
        width: 6px;
    }
}

.level-2 {
    padding-left: 18px;
    
    &:before {
        width: 12px;
    }
}

.level-3 {
    padding-left: 24px;
    
    &:before {
        width: 18px;
    }
}

.level-4 {
    padding-left: 30px;
    
    &:before {
        width: 24px;
    }
}

<div class="span level-1">Test</div>
<div class="span level-2">Test 2</div>
<div class="span level-3">Test 3</div>
<div class="span level-4">Test 4</div>

Answer 1

你可以试试 radial-gradient 作为重复的背景:

.span {
  position: relative;
  background-image:
    linear-gradient(#fff,#fff),
    radial-gradient(circle at center,#000 30%,transparent 40%);
  background-size:100% 100%,6px 12px;
  background-position:0 3px;
  background-repeat:no-repeat,repeat;
}
.level-1 {
  padding-left: 12px;
  background-position:6px 0,0 3px;
}

.level-2 {
  padding-left: 18px;
  background-position:12px 0,0 3px;
}

.level-3 {
  padding-left: 24px;
  background-position:18px 0,0 3px;
}

.level-4 {
  padding-left: 30px;
  background-position:24px 0,0 3px;
}

<div class="span level-1">Test</div>
<div class="span level-2">Test 2</div>
<div class="span level-3">Test 3</div>
<div class="span level-4">Test 4</div>

或者使用 SVG 作为背景:

.span {
  position: relative;
  background-image:
    linear-gradient(#fff,#fff),
    url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="35" fill="#000" /></svg>');
  background-size:100% 100%,7px 7px;
  background-position:0 10px;
  background-repeat:no-repeat,repeat-x;
}
.level-1 {
  padding-left: 12px;
  background-position:6px 0,0 6px;
}

.level-2 {
  padding-left: 18px;
  background-position:14px 0,0 6px;
}

.level-3 {
  padding-left: 24px;
  background-position:20px 0,0 6px;
}

.level-4 {
  padding-left: 30px;
  background-position:28px 0,0 6px;
}

<div class="span level-1">Test</div>
<div class="span level-2">Test 2</div>
<div class="span level-3">Test 3</div>
<div class="span level-4">Test 4</div>