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

Question

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

这里有一些简单的 sn-p 可以在所有主流浏览器中重现此错误：

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">

因为布局不像上面的 sn-p 那样简单，所以我不能改变布局。 我想这里的根本问题是浏览器的抗锯齿，我认为这不是 css 可以改变的，不是吗？

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

Answer 1

通过使用带有多个linear-gradients 的background-image，这似乎可以在没有覆盖的情况下实现。将这两个值插入到组合 linear-gradient 中的 JavaScript 相当笨拙，因为我匆忙编写它来证明解决方案。可以更好！

仅在 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">