html - css中的圆 Angular 虚线边框间距

Question

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

我目前有一个“简单”的虚线边框效果，如下所示:

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

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

呈现(在 chrome 中):

---

但我想:

这可以使用纯 css 实现吗？

(因为我不能使用 border-image，因为 Internet Explorer 10 和更早版本不支持 border-image property。)

我看过 docs但看不到任何引用资料，我见过类似 this 的东西，但显然对我没有帮助。

---

这里有我缺少的 CSS 属性吗？或者另一种可能性？ (不过，在 IMO 看来，这些“点”无论如何都应该是圆的)但是“圆点”也会有好处。

---

Answer 1

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

这也可以很容易地转换为虚线边框，也可以通过将下面的行添加到伪元素来实现。

border-radius: 50%;

Box Shadow is supported in IE9+ also .

Note: This approach would work if you have a fixed height and width. Not the ideal approach but I think this is the most you could achieve using CSS having IE9+ support.

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

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

---

以下片段严格来说不是对当前问题的回答，因为特别提到了 IE9+ 支持。这是我的原始答案(错误)，并作为答案的一部分保留下来，以帮助 future 可能不需要 IE9 支持的读者。此选项使用 linear-gradient 和 background-position(两者都可以支持百分比值)，因此比另一个更可缩放。

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

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