CSS clip 的个人理解

网上查到的clip的介绍虽然有很多，但我觉得都没有讲到点子上，让人有些摸不着头脑。

如果像我一样看的参考资料是w3school关于clip的示例 这个示例的话，相信很多人一开始都会不理解中间的两个值是什么，为什么要这么写？

其实它俩就是图片的宽高，我也不知道他为什么要写的和图片的宽高不一样，害我想了好久…

搞懂了这个之后，剩下的就好理解了
rect的四个属性值是按照top-right-bottom-left（也就是顺时针的顺序）排序的，四个值都不能省略，每个值就代表剪裁掉的尺寸

clip属性的使用：

img 
{
position:absolute;   #绝对定位一定要写
clip:rect(10px 120px 151px 50px)  #中间两个值是图片宽高，初始值就是图片的原始尺寸，只能减少，加大无效
}

<p><img border="0" src="p1.gif" width="120" height="151"></p>

以上面的示例为例，假如是clip:rect(10px 100px 121px 50px)
意思就是顶部剪裁10px，在原始图片的尺寸里，右边剪裁20px，底部剪裁30px，左边剪裁50px。

我还找到了一个演示的页面CSS clip:rect几个值含义示意实例页面 还不懂的同学可以去调试一下各项参数，更助于理解。

参考文章