虚线状树结构

Question

我有跨浏览器问题的边界虚线风格。我已经通过使用border style dotted创建了一个或多个点，但是它对铬的工作非常完美。但在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>

​