Question

我一直在研究支持webkit 和 IE 9 +的虚线边框。

我目前有一个简单的＆＃39;虚线边框效果如此：

＆＃13;

.bord {
  height: 200px;
  width: 300px;
  background: gray;
  border-radius: 20px;
  position: relative;
}
.bord:before {
  content: "";
  position: absolute;
  height: calc(90% - 10px);
  width: calc(90% - 10px);
  left: 5%;
  top: 5%;
  border: 5px dotted black;
}

＆＃13;

<div class="wrapper">
  <div class="bord"></div>
</div>

＆＃13;

渲染（在chrome中）：

enter image description here

但我想：

enter image description here

这可以使用纯css吗？

（因为我无法使用border-image作为 Internet Explorer 10及早期版本不支持border-image property。）

我看过docs但看不到任何参考资料，我看过像this这样的内容，但显然不能帮助我这里。

我在这里缺少一个CSS属性吗？还是另一种可能性？（尽管如此，这些＆＃39;点应该是圆形的）但是圆形的圆点＆＃39;也是有益的。

Answer 1

这是我能达到的最接近的。它使用单个伪元素的多个盒阴影偏移到所需位置。

通过将以下行添加到伪元素，也可以轻松将其转换为点缀边框。

border-radius: 50%;

Box Shadow is supported in IE9+ also

注意：如果您有一个固定的高度和宽度，这种方法将起作用。不是理想的方法，但我认为这是使用支持IE9 +的CSS所能达到的最多。

＆＃13;

.bord {
    height: 185px;
    width: 250px;
    background: gray;
    border-radius: 20px;
    position: relative;
    padding: 25px;
}
.bord:before {
    position: absolute;
    top: 20px;
    left: 20px;
    content:'';
    background: black;
    height: 5px;
    width: 5px;
    box-shadow: 50px 0px 0px black, 100px 0px 0px black, 150px 0px 0px black, 200px 0px 0px black, 250px 0px 0px black, 0px 190px 0px black, 50px 190px 0px black, 100px 190px 0px black, 150px 190px 0px black, 200px 190px 0px black, 250px 190px 0px black, 0px 47.5px 0px black, 0px 95px 0px black, 0px 142.5px 0px black, 0px 47.5px 0px black, 250px 47.5px 0px black, 250px 95px 0px black, 250px 142.5px 0px black;
}

＆＃13;

<div class="wrapper">
    <div class="bord">abcd</div>
</div>

＆＃13;

以下代码段严格地说不是当前问题的答案，因为具体提到了IE9 +支持。这是我原来的答案（错误），并作为答案的一部分保留，以帮助可能不需要IE9支持的未来读者。此选项使用linear-gradient和background-position（两者都可以支持百分比值），因此可以比另一个更具可扩展性。

＆＃13;

.bord {
  height: 235px;
  width: 300px;
  background: gray;
  border-radius: 20px;
  position: relative;
}
.bord:before {
  content: "";
  position: absolute;
  height: calc(90% - 10px);
  width: calc(90% - 10px);
  left: 5%;
  top: 5%;
  background: linear-gradient(90deg, black 10%, transparent 10%), linear-gradient(90deg, black 10%, transparent 10%);    
  background-size: 50px 5px;
  background-repeat: repeat-x;
  background-position: 5px 5px, 5px 195px;
}
.bord:after {
  content: "";
  position: absolute;
  height: calc(90% - 10px);
  width: calc(90% - 10px);
  left: 5%;
  top: 5%;
  background: linear-gradient(0deg, black 10%, transparent 10%), linear-gradient(0deg, black 10%, transparent 10%);
  background-size: 5px 50px;
  background-repeat: repeat-y;
  background-position: 5px 0px, 255px 0px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="wrapper">
  <div class="bord"></div>
</div>

＆＃13;

Answer 2

CSS3多个背景图像（应该）在IE9中工作。因此，只需使用背景图像并将其平铺在元素的四个角上即可。应该是它。

为了让事情变得有趣，您还可以使用以下SVG图像：

＆＃13;

svg {
  background-color: #999;
}

＆＃13;

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"><circle cx="4" cy="4" r="4" fill="#000000"></circle></svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"><circle cx="12" cy="4" r="4" fill="#000000"></circle></svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"><circle cx="12" cy="12" r="4" fill="#000000"></circle></svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"><circle cx="4" cy="12" r="4" fill="#000000"></circle></svg>

＆＃13;

可以使用数据URI将SVG图像嵌入到CSS内部。把所有这些放在一起：

＆＃13;

.bord {
  width: 320px;
  height: 224px;
  border-radius: 16px;
  position: relative;
  background: #999;
}
.bord:before {
  content: "";
  position: absolute;
  left: 16px;
  top: 16px;
  right: 16px;
  bottom: 16px;
  background:
    url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216px%22%20height%3D%2216px%22%3E%3Ccircle%20cx%3D%224%22%20cy%3D%224%22%20r%3D%224%22%20fill%3D%22%23000000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E")
      left top repeat-x,
    url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216px%22%20height%3D%2216px%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%224%22%20r%3D%224%22%20fill%3D%22%23000000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E")
      top right repeat-y,
    url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216px%22%20height%3D%2216px%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E")
      right bottom repeat-x,
    url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216px%22%20height%3D%2216px%22%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23000000%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E")
      bottom left repeat-y;
}

＆＃13;

<div class="bord"></div>

＆＃13;

Answer 3

有一个CSS技巧使用渐变来做到这一点。

element {
  background-position: top;
  background-image: linear-gradient(to right, #f8f8f8 20%, rgba(255,255,255,0) 0%);
  background-size: 5px 1px;
  background-repeat: repeat-x;
}

我已经制作了SCSS mixin来实现这一点并快速改变颜色，大小，位置和间距。请查看github.com/florbraz/Dotted-Border-w-custom-spacing-SCSS-Mixin。

在css中圆角虚线边框间距

3 个答案: