Clip简述

Clip属性在W3C官网是这样进行描述的：“通过对元素进行剪切来控制元素的可显示区域，默认情况下，元素是不进行任何剪切的，但是也有可能剪切区域也显示的设置了clip属性”。

.selector {
clip: | auto | inherit
}
clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。无法在设置“position:relative”和“position:static”上工作。

：shape是一个函数功能，当使用仅使用rect()属性;
auto：这是一个默认值，clip设置auto值和没有进行剪切是一样的效果;
inherit：继承父元素的clip属性值。
很多时候，你可能希望有更多的shape函数功能使用，比如说rect()和circle()等，但是到目前为止仅有rect()函数可使用，不过不用担心，这个功能就可以帮我们制作很多很酷的效果。

Rect()使用
接下来我们来看rect()使用方法。rect()需要设置四个值：top, right, bottom和left。他们之间需要用逗号隔开，而且rect()属性值和margin、padding以及bodrder具有一样的标准，遵循TRBL顺时针旋转的规则。

clip: rect(, , , );
在CSS2.1中，rect()和和指定偏移量是从元素盒子顶部边缘算起；和指定的偏移量是从元素盒子左边边缘算起。
, , , 可以将值设置为“auto”或者长度值。而且还可以充许负的长度值。其中取值为“auto”时，剪切区域的边缘和元素盒子边缘相同
不同浏览器对其的支持不一样。
clip: rect(10px 350px 170px 0); /* IE4 to IE7 /
clip: rect(10px, 350px, 170px, 0); / IE8+ & other browsers */
需要特别的注意，ie4-ie7的要写在标准语句的前面，不然其他浏览器下将会无任何效果
参考于：http://www.w3cplus.com/css3/clip.html