点缀树状结构

Question

我在边框点缀样式上遇到跨浏览器问题。我使用border style dotted创建了一个或多个点 但它完美地研究了镀铬。但在Firefox中，它将无法正常工作。那么在所有浏览器上实现它的最佳方法是什么？

我无法改变我只能从css

制作的标记

Here is fiddle

期望的结果。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>