旋转剪裁的div上的css3白色边框

Question

我将此fiddle修改为符合我的需求：fiddle

问题是出现白色边框，似乎是-webkit-backface-visibility。添加或删除它会产生一些影响，但不会太多。我只需要支持Chrome，因此只有webkit才能解决方案：）

.radial-progress .circle .mask,
.radial-progress .circle .fill {
   -webkit-backface-visibility: hidden;
   transition: -webkit-transform 1s;
   transition: -ms-transform 1s;
   transition: transform 1s;
   border-radius: 50%;
}

有关修复的想法吗？

Answer 1

看起来像是一个子像素渲染问题，导致白色背景颜色泄漏到child-div之外，即使这个child-div理论上应该具有相同的位置和大小。

我没有真正的解决方案，但使用“box-shadow”的解决方法可能足以满足您的使用需求。基本上它只是增加了一个小的插入阴影，覆盖了否则会渗透的区域：

.radial-progress {
  box-shadow: 0 0 1px 0 #646464 inset, 0 0 1px 0 #646464 inset, 0 0 1px 0 #646464 inset, 0 0 1px 0 #646464 inset, 0 0 1px 0 #646464 inset;
}

http://jsfiddle.net/MattDiMu/hk0knaod/2/