CSS圆周边框未显示

Question

在CSS中，我似乎无法在圆圈周围找到一个边框。我已经反复检查以确保CSS中的HTML类是相同的，并且尝试了各种CSS属性的组合。出于某种原因，border: 4px solid #a569bd;正在填充圆圈，而不是成为边框。

​

/* circle icons for legend */

.layer-circle {
  width: 8px;
  height: 8px;
  margin-top: 8px;
  margin-left: 5px;
  position: absolute;
  display: flex;
  border-radius: 50%;
}

.allbrew {
  background-color: black;
}

.brewhunyrds {
  background-color: black;
  border: 4px solid #a569bd;
}

<b>Points of Interest</b>
<div class='poi-layer-options'>
  <div class="layer-circle allbrew"></div>
  <a class="layer-text" id="allbrew"><span>Breweries</span><br></a>
  <div class="layer-circle brewhunyrds"></div>
  <a class="layer-text" id="brewhunyrds"><span>Trail Breweries (100 yards)</span><br></a>
</div>

​

Answer 1

您发布的代码与您描述的内容( jsfiddle所做的)不相对应，但是如果box-sizing: border-box;应用于该元素(可能是由带有*选择器的CSS规则引起的)，则会发生这样的情况:因为在这种情况下，给定的宽度包括边框和边框2x50%之和(即整个宽度)，边框将完全填充元素。

为了避免这种情况，将box-sizing: content-box;添加到该元素的CSS规则中。这将将边框宽度添加到元素宽度/将边框置于元素之外。

您的小提琴相应修改：https://jsfiddle.net/sayxcfrn/