最佳答案
最简单的解决方案是使用框阴影作为第二个边框,并使用绝对定位元素作为 10% 填充。
这是片段示例:
.circle {
display: inline-block;
width: 250px;
height: 250px;
border-radius: 50%;
border: 10px solid white;
text-align: center;
line-height: 250px;
overflow: hidden;
padding: 3px;
position: relative;
box-sizing: border-box;
box-shadow: 0 0 0 10px gray;
margin: 50px
}
.fill {
background-color: teal;
height: 10%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
<div class="circle">
<span class="text">text</span>
<div class="fill"></div>
</div>
还有一把 fiddle : https://jsfiddle.net/0ryjh4xd/2/
关于jquery - 如何使用 CSS 仅对圆的 10% 底部进行着色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40041688/