CSS在圆圈内画圆圈，如同显示表格 - 单元格

Question

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

我认为这将是简单的，但因为我使用显示：表的容器和表格单元的内部位填充/保证金没有表现得如我所愿。

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

我怎样才能让内圈有一些内部填充？尝试保证金，填充，边界间距等......都无济于事。

Answer 1

我通过使父亲相对并绝对定位子元素来解决问题，其中的内部位由an：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; 
} 

Answer 2

如果您添加插图框阴影CSS你可以添加第三颜色。

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

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