css3 clip实现圆环进度条的示例代码

CSS中有一个属性叫做clip，为修剪，剪裁之意。 clip 属性剪裁绝对定位元素。这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。 环形进度条.gif 怎么实现这样一个圆环进度条的效果呢，可以使用canvas、svg、GIF等等方式，今天我们来说下使用css3怎么来实现。 实现思路 圆环很简单，一行cssborder-radius:50%即可实现，而且没有兼容性问题，什么，你说IE，让它滚… 我们这里需要三个圆环，一个整的，两个半的。大概画了下图 这里半圆环我使用了clip进行裁剪，主要代码如下,