时间戳

首页 > 解决方案 > 边界半径与虚线之间的自定义空格

html - 边界半径与虚线之间的自定义空格

问题描述

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

我希望自定义边框也遵循半径。

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

标签： htmlcss

解决方案

这可能更适合 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 圆角

如果你想处理一个圆圈，另一个相关的问题是：如何创建具有均匀间距的虚线圆圈？

推荐阅读