CSS在圆圈内绘制圆圈，作为显示表格单元格答案

【问题标题】：CSS draw circle inside circle, as display table-cellCSS在圆圈内绘制圆圈，作为显示表格单元格
【发布时间】：2017-07-22 14:52:06
【问题描述】：

我正在尝试在环内绘制一个实心圆。我的外圈工作得很好，但内圈填满了整个圈，而我想要几个像素的内部填充。

我认为这很简单，但是因为我使用 display:table 作为容器，而使用 table-cell 作为内部位填充/边距的行为并不像我希望的那样。

示例 jsfiddle，https://jsfiddle.net/joshuaohana/5ewemw0q/ 在这个我想让红色的内部位不占据整个圆圈，但在它和外边框之间有几个像素的间距。

全部是表格/表格单元格的原因是为了轻松管理将圆圈与其关联的标签垂直对齐。

<div class="radio">
  <label>label</label>
</div>

.radio {
  display: table;
  border-spacing: 10px;
  margin: 0 -10px;
 }

.radio:before {
  display: table-cell;
  vertical-align: middle;
  height: 20px;
  width: 20px;
  border: 2px solid blue;
  border-radius: 50%;
  content: "";
  background-color: red;
}

.radio > label {
  display: table-cell;
  vertical-align: middle;
}

我怎样才能让内圈有一些内边距？尝试了margin、padding、border-spacing等...都无济于事。

【问题讨论】：

标签： css

【解决方案1】：

我通过使父级相对和绝对定位子级来解决问题，内部位由 :after 伪元素完成。现在工作得很好

https://jsfiddle.net/joshuaohana/5ewemw0q/2/

.radio {
  display: table;
  border-spacing: 10px;
  margin: 0 -10px;
  position: relative;
 }

.radio:before {
  display: table-cell;
  vertical-align: middle;
  height: 20px;
  width: 20px;
  border: 2px solid blue;
  border-radius: 50%;
  content: "";
  position: absolute;
}

.radio:after {
  display: table-cell;
  vertical-align: middle;
  height: 10px;
  width: 10px;
  background: red;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 16.5px;
  top: 16.5px;
}

.radio > label {
  display: table-cell;
  vertical-align: middle;
  position: absolute;
  left: 42px;
  top: 12px;
}

【讨论】：

【解决方案2】：

如果您向 box-shadow css 添加插图，则可以添加第三种颜色。

box-shadow: inset 0px 0px 10px 1px yellow;

https://jsfiddle.net/wallyglenn/j3e78n4p/

【讨论】：