Question

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 1

如果我理解正确，你需要在元素上有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>

Answer 2

这种做法怎么样？这允许根据您的原始请求固定宽度边框。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: