边界半径与虚线之间的自定义空格答案

【问题标题】：Border radius with custom spaces between dotted边界半径与虚线之间的自定义空格
【发布时间】：2019-05-13 10:30:36
【问题描述】：

我在我的 div 元素中使用自定义虚线样式边框。我必须使用背景创建自定义边框，因为我必须在虚线之间定义空格。但在 corners 中，由于边框半径，它不显示。我该如何解决这个问题或任何其他解决方案？

我希望自定义边框也跟随半径。

.element {
  width: 400px;
  height: 400px;
  background: linear-gradient(to right, black 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(black 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, black 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(black 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, right, bottom, left;
  background-repeat: repeat-x, repeat-y;
  background-size: 20px 1px, 1px 20px;

  border-radius: 70px;
}

<div class="element">
</div>

【问题讨论】：

你的边框就是你的背景
是的，我正在尝试使用背景自定义边框，因为我必须更改虚线之间的空格。
我认为你不能轻易解决这个问题，因为边框半径会在渲染边框时切割背景部分。

标签： html css

【解决方案1】：

这可能更适合 SVG，您可以使用 stroke-dasharray 轻松控制边框

svg {
  width: 250px;
}

path {
  fill: none;
  stroke-dasharray: 13, 20;
}
path.more {
  fill: none;
  stroke-dasharray: 10, 30;
}
path.less {
  fill: none;
  stroke-dasharray: 25, 15;
}

<svg viewBox="50 70 300 300">
  <path d="M100,100 h200 a80,80 0 0 1 20,20 v200 a80,80 0 0 1 -20,20 h-200 a80,80 0 0 1 -20,-20 v-200 a80,80 0 0 1 20,-20 z"  stroke="black" stroke-width="2" />
</svg>
<svg viewBox="50 70 300 300">
  <path d="M100,100 h200 a80,80 0 0 1 20,20 v200 a80,80 0 0 1 -20,20 h-200 a80,80 0 0 1 -20,-20 v-200 a80,80 0 0 1 20,-20 z" class="more"  stroke="black" stroke-width="2" />
</svg>
<svg viewBox="50 70 300 300">
  <path d="M100,100 h200 a80,80 0 0 1 20,20 v200 a80,80 0 0 1 -20,20 h-200 a80,80 0 0 1 -20,-20 v-200 a80,80 0 0 1 20,-20 z" class="less"  stroke="black" stroke-width="2" />
</svg>

查看此问题以了解有关如何使用 SVG 定义/控制半径的更多方法：SVG rounded corner

如果要处理圈子的另一个相关问题：How to create dashed circles with uniform spacing?

【讨论】：

@J.Sadi 是的，带有边框半径的 SVG 有很多方法，但我想专注于 stroke-dasharray 而不是 SVG。我还链接到另一个问题，我们可以在其中看到所有这些方法；）

【解决方案2】：

您可以使用 SVG-Rectangle 和 stroke-dasharray 来完成这项工作，就像我在这里所做的那样：

.element {
  width: 400px;
  height: 400px;
  border-radius: 70px;
  position: relative;
}

.element svg {
  stroke-width: 0.5;
  stroke-dasharray: 10, 12;
  fill: none;
  stroke: black;
}

.element .content {
  position: absolute;
  top: 25px;
  left: 25px;
}

<div class="element">
  <svg width="400" height="400">
    <rect x="1" y="1" rx="70" ry="70" width="398" height="398">
  </svg>
  <div class="content">
    put content here...
  </div>
</div>

【讨论】：