CSS在圆圈内画圆圈,如同显示表格 - 单元格
问题描述:
我想在圆环内画一个实心圆圈。我得到了外圈工作很好,但内圈填充整个圆圈,而我想要几个像素内填充。CSS在圆圈内画圆圈,如同显示表格 - 单元格
我认为这将是简单的,但因为我使用显示:表的容器和表格单元的内部位填充/保证金没有表现得如我所愿。
例子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;
}
我怎样才能让内圈有一些内部填充?尝试保证金,填充,边界间距等......都无济于事。
答
我通过使父亲相对并绝对定位子元素来解决问题,其中的内部位由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;
}
答
如果您添加插图框阴影CSS你可以添加第三颜色。
box-shadow: inset 0px 0px 10px 1px yellow;
爽哦感谢。 –