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

【问题标题】：css3 white borders on rotated clipped divs旋转剪辑的div上的css3白色边框
【发布时间】：2017-08-03 11:30:44
【问题描述】：

我修改了这个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%;
}

有什么解决办法吗？

【问题讨论】：

标签： html css google-chrome css-transitions css-transforms

【解决方案1】：

在我看来像一个亚像素渲染问题，这会导致白色背景颜色泄漏到子 div 之外，即使这个子 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/

【讨论】：