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/