css2 属性clip实现网页进度条

在实现之前，我们先来介绍一下clip属性，因为这个属性在css2.1中很少使用到，所以我们有必要来了解一下；

浏览器支持程度：所有主流浏览器都支持 clip 属性。

Clip属性在w3c官网是这样描述的：通过对元素进行裁剪来控制元素的可视区域，默认情况下 元素是不进行任何裁剪的。

Clip裁剪的语法如下：

.xx {clip:rect(<top>, <right>, <bottom>, <left>)}

Rect属性需要四个值，top,right,bottom,left；他们之间需要使用逗号隔开。遵循顺时针旋转规则，和我们的css中的margin，padding书写顺序一样的。

在css2.1中，rect()的<top>,<bottom>指定偏移量是从元素的盒子顶部边缘算起的，<left>，<right>指定的偏移量是从元素的盒子左边边缘算起的