渲染溢出时的细线：用边框半径隐藏

Question

为了实现一些漂亮的圆形进度条，我使用了一个带有边框半径和溢出的元素：隐藏。一切看起来都很好，除了一件事：所有浏览器在溢出结束处显示一条细线。

这是一些简单的片段，可以在所有主要浏览器中重现此错误：

function setMarginLeft(value){
    var element = document.querySelector(".overflowing");
    element.style.marginLeft = value+"px";
}
function setMarginTop(value){
    var element = document.querySelector(".overflowing");
    element.style.marginTop = value+"px";
}

.backdrop {
  background-color: white;
  padding: 10px;
  width:100px;
  height:100px;
}
.circle {
  background-color: red;
  width:100px;
  height:100px;
  border-radius: 100px;
  overflow:hidden;
}
.overflowing {
  width:200px;
  height:200px;
  margin-top: 10px;
  margin-left: 10px;
  background-color:#fff;
}
input {
  margin-top:10px;
}

<div class="backdrop">
  <div class="circle">
    <div class="overflowing"></div>
  </div>
</div>
<span>top and right of the circle you should see some red, bottom left not</span><br />
<em>Feel free to play around with these values:</em><br />
Top margin: <input type="number" id="cngMargin" oninput="setMarginTop(this.value)" value="10"><br />
Left margin: <input type="number" id="cngMargin" oninput="setMarginLeft(this.value)" value="10">

由于布局几乎不像上面的代码片段那么简单，我不能对布局进行太多更改。我想这里的基本问题是浏览器的抗锯齿，我认为它不能被 css 改变，或者是吗？

我在这件事上用谷歌搜索自己很愚蠢，无法找到真正有用的资源。我想如果没有其他效果，我将不得不在 SVG 或画布上重新做 -.-

Answer 1

background-image通过使用带有多个s的覆盖，这似乎是可能的linear-gradient。将两个值插入到组合中的 JavaScriptlinear-gradient相当笨拙，因为我匆忙编写了它来证明解决方案。还可以更好！

仅在 Chrome 中测试。

var marginTop = marginLeft = 0;

function setMarginLeft(value) {
  marginTop = value;
  applyToCircle();
}

function setMarginTop(value) {
  marginLeft = value;
  applyToCircle();
}

function applyToCircle() {
  var element = document.querySelector('.circle');
  element.style.backgroundImage = 'linear-gradient(90deg, red '+ marginTop + '%, transparent 0%), linear-gradient(180deg, red '+ marginLeft + '%, transparent 0%)';
}

.backdrop {
  background-color:white;
  padding: 10px;
  width:100px;
  height:100px;
}

.circle {
  width:100px;
  height:100px;
  border-radius:50%;
}

input {
  margin-top:10px;
}

<div class="backdrop">
  <div class="circle">
  </div>
</div>
<em>Feel free to play around with these values:</em><br />
Top margin: <input type="number" id="cngMargin" oninput="setMarginTop(this.value)" value="0"><br />
Left margin: <input type="number" id="cngMargin" oninput="setMarginLeft(this.value)" value="0">