我正在尝试在 CSS 中创建一个带有镶嵌边框的圆圈，如下例所示：
我有以下 HTML 和 CSS，但它没有产生我需要的效果：
.inlay-circle {
width: 15rem;
height: 15rem;
border: solid #a7a9ac 2px;
border-radius: 50%;
}
.inlay-circle:before {
top: 0.7rem;
left: 0.5rem;
position: absolute;
content: '';
width: 15rem;
height: 15rem;
border-right: solid #658d1b 0.6rem;
border-radius: 50%;
transform: rotate(45deg);
}
<div class="inlay-circle"></div>
任何有关使镶嵌物平方并增加镶嵌物和主圆之间的间距的帮助将不胜感激。
首先，我已将尺寸更改为像素，因为仅使用一个单位更容易，但您当然可以将其更改回来。所以我将绿色边框设为 10px 厚。
您需要 3 个圆形部分才能实现此目的。一个用于灰色圆圈，一个用于绿色四分之一，一个用于实现两个可见部分之间的间隙。使用我无法立即想到的其他方法可能可以实现该差距。
首先，我将绿色边框移至::after伪选择器，所以我可以在它下面放一些东西来创建间隙（::before伪选择器）
其次，为了避免绿色边框的增长/收缩效果，您需要使整个绿色圆圈具有相同的大小（至少是与绿色边框相邻的部分）border-right, i.e. border-top and border-bottom）。这可以通过添加 10px 透明边框来完成：
border: solid transparent 10px;
为了补偿整个盒子的绿色边框因此而增长，我在左侧/顶部添加了负边距。
对于间隙，创建第二个圆。这个有白色边框。这意味着它不适用于任何其他背景（但您可以更改此边框的颜色以匹配背景）。它更大一点，并向左/顶部移动得更远，以便放置在适当的位置。
.inlay-circle {
width: 15rem;
height: 15rem;
border: solid #a7a9ac 2px;
border-radius: 50%;
}
.inlay-circle::after {
margin-left: -15px;
margin-top: -15px;
position: absolute;
content: '';
width: 15rem;
height: 15rem;
border: solid transparent 10px;
border-right: solid #658d1b 10px;
border-radius: 50%;
transform: rotate(45deg);
}
.inlay-circle::before {
margin-left: -30px;
margin-top: -30px;
position: absolute;
content: '';
width: 15rem;
height: 15rem;
border: solid transparent 20px;
border-right: solid white 20px;
border-radius: 50%;
transform: rotate(45deg);
}
<div class="inlay-circle"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
