Question

我正在尝试（但失败）产生一个圆圈在边框上完全均匀间隔的点。制作一个圆润的虚线边框是没有问题的。但是这些点并不能完全正确地隔开。我尝试了div大小的许多不同组合，点（边界）大小，半径大小等顶部的两个点间距不均匀。

html,
body {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: #000;
}

.vertz {
  position: relative;
  margin: 0px;
  padding: 0px;
  padding-left: -10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.horz {
  width: 300px;
  height: 300px;
  font-weight: bold;
  margin: auto;
}

.shadow {
  box-shadow: 0px 0px 10px #888888;
  -moz-box-shadow: 0px 0px 10px #888888;
  -webkit-box-shadow: 0px 0px 10px #888888;
  -o-box-shadow: 0px 0px 10px #888888;
}

.dots {
  border: rgba(3, 79, 132, 0.75) dotted 5px;
  border-radius: 200px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  -o-border-radius: 200px;
}

<div class="vertz horz dots"></div>

Answer 1

这可能会有所帮助。快速变得复杂。

How to increase space between dotted border dots

虚线边框-点间距均匀

1 个答案: