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

我试图在一个圆环内画一个实心圆。我让外圆工作得很好，但内圆填满了整个圆，而我想要几个像素的内填充

我认为这很简单，但因为我使用的是display:table作为容器，table cell作为内部位padding/margin，它们的行为并不像我希望的那样

例如jsfiddle，在这里，我希望红色的内部位不占据整个圆，而是在它和外部边界之间有几个像素的间隔

其全部为表格/表格单元格的原因是，可以轻松管理圆与其关联标签的垂直对齐

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

标签
.收音机{
显示：表格；
边界间距：10px；
利润率：0-10px；
}
.收音机：以前{
显示：表格单元格；
垂直对齐：中间对齐；
高度：20px；
宽度：20px；
边框：2件纯蓝；
边界半径：50%；
内容：“；
背景色：红色；
}
.收音机>标签{
显示：表格单元格；
垂直对齐：中间对齐；
}

---

我怎样才能使内圈有一些内部填充？尝试边距、填充、边框间距等。。。所有这些都没有用。

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

---

如果在框阴影css中添加插图，则可以添加第三种颜色

框阴影：嵌入0px 0px 10px 1px黄色


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