响应式 Div 圈子在另一个响应式 div 圈子内并集中？

Question

因为实际上我需要一个5px或10px的边框。研究我发现边框不能使用百分比 - 所以，替代方法是创建一个内部有 94% 圆的圆。但我不能集中它:( 我可以使用侧边距自动将它放在中心，但我仍然无法将它垂直居中。关于将一个圆圈放入另一个圆圈以模拟边框的最佳方法的任何线索？

.groupIconOuter {
  background: red;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.groupIconInner {
  background: blue;
  width: 94%;
  height: 0;
  padding-bottom: 94%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

<div class="groupIconOuter">
  <div class="groupIconInner"></div>
</div>

Answer 1

这个方法怎么样？这允许根据您的原始请求使用固定宽度的边框。

.groupIconOuter {
  background: red;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 10px blue;
}

<div class="groupIconOuter">
</div>

Answer 2

如果我没理解错的话，您希望元素上有 3% 的边框。您可以为此使用相对绝对定位：

.groupIconOuter {
  background: red;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  position: relative;
}
.groupIconInner {
  background: blue;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  position: absolute;
  left: 3%;
  top: 3%;
  right: 3%;
  bottom: 3%;
}

<div class="groupIconOuter">
  <div class="groupIconInner"></div>
</div>

响应式 Div 圈子在另一个响应式 div 圈子内并集中？

Responsive Div Circle inside another responsive div circle and centralized?

html

css