在css中创建圆形扇区时，在Chrome和IE中可以看到一条细线

Question

我是一个css新手，我正在使用css和jquery的混合创建一个自定义音频播放器。这个音频播放器的进度条是一个圆环，它使用圆形扇区来显示进度。扇区是使用线性梯度创建的，如下所示:

background-image:
    linear-gradient(-75deg, black 50%, transparent 50%),
    linear-gradient(90deg, transparent 50%, white 50%);

在firefox中，这个效果很好，但是在chrome和ie中，在圆的一半的外面可以看到一条非常细的白线，大概是线性梯度的一部分应该覆盖的地方。

我已经创建了一个显示问题的jsfiddle, https://jsfiddle.net/9dagsrzz/

是否有什么我做错了，导致这一点，或者有一个修复，我可以应用，删除这一行?

感谢您的宝贵时间。

编辑-已经一个多月了，我想我应该更新一下，说我仍然没有找到这个问题的完整解决方案。处理这个问题的最好方法是包括一个覆盖的边框，正如下面Pustur所建议的。

Answer 1

，

我也不是CSS专家，但我知道每个浏览器在处理渐变时都有其所需的前缀:

-moz- is for Mozilla Firefox
-webkit- is for Apple Safari, Google Chrome, and also for ios and Android
-o- is for Opera
-ms- is for Microsoft IE and presumably Edge

你可以把所有这些都放在自己的行上，浏览器会选择正确的。

的例子:

background-image:
-moz-linear-gradient(-75deg, black 50%, transparent 50%),
-moz-linear-gradient(90deg, transparent 50%, white 50%);
-webkit-linear-gradient(-75deg, black 50%, transparent 50%),
-webkit-linear-gradient(90deg, transparent 50%, white 50%);
-o-linear-gradient(-75deg, black 50%, transparent 50%),
-o-linear-gradient(90deg, transparent 50%, white 50%);
-ms-linear-gradient(-75deg, black 50%, transparent 50%),
-ms-linear-gradient(90deg, transparent 50%, white 50%);

网站http://caniuse.com列出了主要的CSS规则、属性以及是否需要浏览器特定版本。(尼克松，第439页)

使用前缀，它们会帮助你解决问题。

好运。吉姆

Answer 2

不确定这是否是一个明确的解决方案或最好的，但它似乎至少在chrome上工作得很好。

HTML:

<!-- divs instead of spans -->
<div id="container">
  <div id="position_indicator"></div>
  <div id="inside"></div>
</div>

CSS:

#container {
  width: 100px;
  height: 100px;
  background-color: black;
  position: relative;
  padding: 20px;
}
#inside {
  width: 90px;
  height: 90px;
  background-color: black;
  border-radius: 100%;
  position: absolute;
  margin-left: 5px;
  margin-top: 5px;
}
#position_indicator {
  border: 1px solid black; /* Fix the border issue! */
  margin-left: -1px; /* Compensate for the new border */
  margin-top: -1px; /* Compensate for the new border */
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: absolute;
  background-color: black;
  background-image: linear-gradient(-75deg, black 50%, transparent 50%), linear-gradient(90deg, transparent 50%, white 50%);
}

小提琴