CSS clip 属性深入

之前的工作中有用到过clip这个属性。最近工作又再次用到这个属性时，发现自己忘了怎么设置这个属性值的了。看来上次没有真的弄懂这个属性，又去查了查文档学习了一下。这里简单分享，同时加深一下映像。

作用

w3school是这么说的: clip 属性剪裁绝对定位元素。 MDN是这么说的: clip 属性定义了元素的哪一部分是可见的。

可能值

值	描述
shape	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto	默认值。不应用任何剪裁。
inherit	规定应该从父元素继承 clip 属性的值。

rect( )裁剪出一个"矩形"的可见区域。
     指定矩形上边框相对于盒子上边框边的偏移
    指定矩形下边框相对于盒子上边框边的偏移
     指定矩形左边框相对于盒子左边框边界的偏移
     指定矩形右边框相对于盒子左边框边界的偏移

实例

现在用clip属性对下面这张图片进行一下裁剪

原图

clip 属性剪切了一幅图像：
![](http://upload-images.jianshu.io/upload_images/2005044-4338731269c05592.gif?imageMogr2/auto-orient/strip)

clip:rect(75px 60px 151px 0px);指定矩形上边框相对于盒子上边框边的偏移75个像素，矩形左边框相对于盒子左边框边的偏移60个像素，矩形下边框相对于盒子上边框边的偏移151个像素，矩形右边框相对于盒子左边框边的偏移0个像素。所以显示的部分应该就是左下角四分之一区域。如下图：

效果

以上效果可以在w3school 做做尝试。我这里之前还使用clip实现过一个音频播放圆环进度条。有兴趣也可以看看。使用CSS clip 属性实现音频播放圆环进度条