突然需要做一个环形音频播放进度条（上图效果），想了很久，但它还没有实现。最后才知道css还有clip属性，完美满足要求。分享一下，说不定能帮到其他朋友。至于有没有用，我不知道，whocare！好了，不说了，走吧！CSSclip属性首先，我们简单了解一下cssclip属性描述。clip属性剪辑绝对定位的元素。此属性用于定义裁剪矩形。对于绝对定义的元素，此矩形内的内容仅可见。这个裁剪区域之外的内容会按照overflow的值进行处理。可能值值说明shape设置元素的形状。唯一合法的形状值是：rect(top,right,bottom,left)autodefault。不应用剪裁。inherit指定clip属性的值应该从父元素继承。源码w3school使用的原理是：通过裁剪让一个正方形的div只显示右半边，然后在这个div里通过裁剪做出一个带边框的左半圆（边框的大小就是进度条的大小），因为div只显示右半边，把半圆剪掉就看不到了。然后使用rotate旋转半圆，实现50%以内的进度条。当超过50%时，取消div的裁剪，然后用一个半圆来保存50%的进度条，实现100%的进度条。影响。贴上代码，然后对关键代码进行注释说明。/*css部分*/.circleProgress_wrapper{/*设置圆的大小*/margin:auto;宽度：200px；高度：200px；边界半径：50%；cursor:pointer;}.slice{/*这是一个被切掉了左半边，只显示右半边的div*/position:absolute;/*必须是绝对定位元素，clip属性才会生效*/width:100%;高度：100%；clip:rect(0,200px,200px,100px);/*top:0,right:200,bottom:200,left:100切出右半边*/}.slice.gt50{/*进度超过50%时,取消裁剪*/clip:rect(auto,auto,auto,auto);}.bar,.fill{/*两个只显示左半边的半圆*/position:absolute;框大小：边框框；宽度：100%；高度：100%；border:4pxrgba(255,249,0,0.77)solid;/*设置进度条的大小和颜色*/border-radius:50%;剪辑：矩形（0,100px,200px,0）；/*top:0,right:100,bottom:200,left:0切出左半边*/}.slice.gt50.fill{/*当进度超过50%时，让fill旋转180度填充50%*/transform:rotate(180deg);
