css 中的圆角虚线边框间距

Question

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

我目前有一个 'simple' 虚线边框效果，如下所示：

.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 but couldn't see any reference, and I've seen stuff like this，但显然对我没有帮助。

我这里有CSS属性吗？或者另一种可能性？（不过，IMO，这些 'dots' 应该是圆形的）但是 'rounded dots' 也会有好处。

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+ 支持，因此以下片段严格来说并不是对当前问题的回答。这是我的原始答案（错误），并作为答案的一部分保留下来，以帮助未来可能不需要 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>

Answer 2

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

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

svg {
  background-color: #999;
}

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

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

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

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

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.

查看

Answer 4

您可以在 css.

中使用单个 svg

.dotted-bloc {
  width: 200px;
  height: 150px;
  margin: 30px auto;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' fill-rule='evenodd' stroke='%23000000' stroke-width='5' stroke-dasharray='3 10'/%3e%3c/svg%3e");
}

<div class="dotted-bloc">
</div>

stroke='%23000000' 最后 6 个数字代表您的十六进制颜色（000000 代表黑色，FF0000 代表红色...）

stroke-width='5'数值为边框的宽度

stroke-dasharray='3 10'第一个数字是一个点的宽度，第二个数字是每个点之间的间隔。

css 中的圆角虚线边框间距

Rounded dotted border spacing in css

html

css

svg

css-shapes