Question

为了实现一些奇特的圆形进度条，我使用了一个边框半径和overflow：hidden的元素。一切都很好，除了一件事：所有浏览器都显示溢出结束的细线。

这里有一些简单的代码片段可以在所有主流浏览器中重现此错误：

＆＃13;

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

＆＃13;

.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: -1px;
  margin-left:1px;
  background-color:#fff;
}
input {
  margin-top:10px;
}

＆＃13;

<div class="backdrop">
  <div class="circle">
    <div class="overflowing"></div>
  </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="-1"><br />
Left margin: <input type="number" id="cngMargin" oninput="setMarginLeft(this.value)" value="1">

＆＃13;

由于布局几乎不像上面的代码片段那样简单，我无法更改布局。我想这里的基本问题是浏览器的抗锯齿，我认为它不能被CSS改变，或者是它？

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

Answer 1

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

仅在Chrome中测试。

linear-gradient

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;
}

渲染溢出时的细线：使用border-radius

1 个答案: