如何在CSS中使用borderRadius和borderLeftColor，borderBottomColor，borderRightColor，borderTopColor？

Question

我希望这个圆圈有25％的彩色边框和75％的透明度，但却有一个意想不到的100％圆圈边框和黑色。

我也尝试过每个角落的borderRadius，但它没有给出理想的输出。

progressLayer：{width：200，height：200，borderWidth：20，position：'absolute'，borderLeftColor：'transparent'，borderBottomColor：'transparent'，borderRightColor：'transparent'，borderTopColor：'＃3498db'，borderRadius：100， }};

圆形，边框为25％，透明度为75％。

Answer 1

为了使一些边框透明，这应该工作：

border-right: 2px solid transparent;

其他边界也一样。

Answer 2

使用透明而不是不透明度的一个巧妙的技巧是使用rgba颜色，因此，它不会是borderLeftColor: 'transparent'，而是使用borderLeftColor: 'rgba(0,0,0,0)' [最后0是透明度，如果你使用0,0,0,1它将是黑色和0,0,0,0.5给出了漂亮的黑色叠加]。

另一种解决方案只是为特定方向启用边界宽度。

progressLayer: { width: 200, height: 200, borderTopWidth: 20, position: 'absolute', borderTopColor: '#3498db', borderRadius: 100, } });

应该工作，但没有测试圆圈