Question

我想在戒指内画一个实心圆圈。我让外圈工作得很好，但是内圈正在填满整个圆圈，而我想要几个像素的内部填充。

我认为这很简单但是因为我使用display：table表示容器，table-cell表示内部位填充/ margin不表现为我希望。

示例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

我通过使父亲相对并绝对定位子项来解决，内部位由：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

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

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

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

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

2 个答案: