以下内容来自去年的一个案例。随着微信小程序的不断改版，部分条件可能不再适用，请谨慎参考。内容比较短，主要是代码片段。案例某项目中需要用到如下图所示的带有圆形一行的进度条。本来的想法是用canvas来实现，但是canvas是最高层级的native组件（当时的情况），实际使用起来不方便。于是决定尝试用纯CSS实现这个效果。实现原理先上代码：https://developers.weixin.qq....这里主要用到了css中的clip属性。切出一个正方形后，只显示右边的一半，但仍以正方形的中心作为圆心。旋转以获得所需的角度。剪辑：矩形（0rpx、46rpx、92rpx、0rpx）；这样顶部进度条可以由下面三部分叠加，在顶部叠加一个较小的白色圆圈，最外层填充圆角。可以实现。（下图红线为最外层圆角和白圈在最上层位置的例子）当蓝圈小于180度时使用叠加效果时，背景色和前景颜色需要交换。
