CSS边界点之间的间距是否相等？

Question

我有一个CSS代码，可在此处创建简单的虚线边框：

/name

现在问题出在最后两个最后点之间的距离太近了……

如果我希望所有点之间的距离相等...该怎么办...

编辑：我只需要在chrome上使用，这就是整个CSS（@ActionMapping(value = "update") public String update(ActionRequest request, ActionResponse response) { return "update";//how to call method update that is below instead of view method } @RenderMapping(value = "update") public String update(RenderRequest request, RenderResponse response) { return "updateForm"; } @RenderMapping() public String view(RenderRequest request, RenderResponse response) { return forward; } 就在最后...）

border: 5px dotted #ff2100

HTML

border: 5px dotted #ff2100

Answer 1

您无法使用纯CSS here来解决此问题。您可以使用背景图片或边框图片来达到目的。

Answer 2

免责声明：此解决方案似乎仅在某些情况下有效（操作系统，Chrome版本等）。使用后果自负。

---

您需要做的是将红点的数量四舍五入为整数。

对于150x150的图片，周长为486.95像素，无法容纳5px整数。一种解决方案是将4.9688px用作边框宽度，但这不起作用。浏览器将边框宽度四舍五入为整数。
因此，我们必须采取一些小技巧才能使其适应要求。我们将图像放大，给它整个像素的边框宽度，然后将整个图像缩小到其原始大小。

对不起，我无法使用您的来源，因为您的来源不包含图片，但是希望您可以使用此图片。

.profile {
  width:160px; height:160px;
  overflow:hidden;
}
.profile img {
  vertical-align:top;
  background:#2F293D;
  /* multiply the size by 32 */
  width:calc(150px * 32); height:calc(150px * 32);
  border:calc((5px * 32) - 1px) dotted #FF2100;
  border-radius:50%;
  /* then scale back by the same factor */
  transform:scale(calc(1 / 32));
  transform-origin:0 0;
}

<div class="profile">
 <img src="https://i.stack.imgur.com/W2IqJ.jpg" alt="photo">
</div>

为了进行比较，这是一个没有技巧的代码段，演示了点的不均匀定位。

.profile {
  width:160px; height:160px;
  overflow:hidden;
}
.profile img {
  vertical-align:top;
  background:#2F293D;
  border:5px dotted #FF2100;
  border-radius:50%;
}

<div class="profile">
 <img src="https://i.stack.imgur.com/W2IqJ.jpg" alt="photo">
</div>

请注意，我必须使用overflow:hidden在图像周围放置一个容器，否则浏览器仍会认为图像与width和height一样大，并会相应地保留空间

Answer 3

解决您的问题的一种方法是使用“边框图像”。使用此css属性，您可以应用边框图像而不是直接边框，这将消除混合点的问题。 有关详细信息，请参阅“ https://css-tricks.com/almanac/properties/b/border-image/”。