css clip:rect剪裁问题

css的clip属性，有剪裁的效果，但是一般我很少用，但是今天在项目中碰到了，那就具体说说clip剪裁功能；为什么一般很少用clip呢，因为有其他的方法代替剪裁，例如我们经常用的over-flow:hidden;这种生硬的剪裁（或者说是隐藏超出部分）;

下面来说一说clip：

1、首先，如果先有"overflow：visible"，clip属性不起作用。

2、clip配合position:absolute;使用，生成绝对定位元素，进行剪裁

3、clip默认属性auto，意为不剪裁

4、clip:rect(0px,60px,200px,0px);  //rect里面参数遵循（top, right, bottom, left）；

那么，这里面的上右下左怎么理解呢，其实是这样的，top right bottom left分别指最终剪裁可见区域的上边，右边，下边与左边。而所有的数值都表示位置，且是相对于原始元素的左上角而言的。例如：

<input ref="imgFile" type="file" id="uploads" multiple style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg">

为最终剪裁的矩形的上边距离原始元素的上边缘0像素，最终剪裁的矩形的上边距离原始元素的右边缘0像素，最终剪裁的矩形的下边距离原始元素的上边缘0像素，最终剪裁的矩形的左边距离原始元素的上边缘0像素。

参考：https://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/