如何在CSS中使用borderRadius和borderLeftColor，borderBottomColor，bord

Question

我想要带有 25% 彩色边框和 75% 透明的圆圈，但得到了意想不到的 100% 黑色圆形边框。

我还为每个角尝试了 borderRadius，但它没有给出理想的输出。

进度层：{ 宽度： 200， 高度： 200， 边框宽度： 20， 位置："绝对"， borderLeftColor： 'transparent'， borderBottomColor： 'transparent'， 边框右颜色："透明"， borderTopColor： '#3498db'， 边框半径： 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, } });

应该工作，但未测试圆圈