CSS Clip屬性

Clip屬性在W3C官網是這樣進行描述的：“通過對元素進行剪切來控制元素的可顯示區域，默認情況下，元素是不進行任何剪切的，但是也有可能剪切區域也顯示的設置了clip屬性”。

.selector {
    clip: <shape> | auto | inherit
}    

首先你要注意：clip屬性只能在元素設置了“position:absolute”或者“position:fixed”屬性起作用。clip無法在設置“position:relative”和“position:static”上工作。

上面的語法告訴我們，clip屬性只接受三個不同的屬性值：

1.  <shape>：shape是一個函數功能，當使用僅使用rect()屬性;
2.  auto：這是一個默認值，clip設置auto值和沒有進行剪切是一樣的效果;
3.  inherit：繼承父元素的clip屬性值。

很多時候，你可能希望有更多的shape函數功能使用，比如說rect()和circle()等，但是到目前為止僅有rect()函數可使用，不過不用擔心，這個功能就可以幫我們制作很多很酷的效果。

Rect()使用

接下來我們來看rect()使用方法。rect()需要設置四個值：top, right, bottom和left。他們之間需要用逗號隔開，而且rect()屬性值和margin、padding以及bodrder具有一樣的標准，遵循TRBL順時針旋轉的規則。

 clip: rect(<top>, <right>, <bottom>, <left>);

在CSS2.1中，rect()和<top>和<bottom>指定偏移量是從元素盒子頂部邊緣算起；<left>和<right>指定的偏移量是從元素盒子左邊邊緣算起（包括邊框）。

<top>, <right>, <bottom>, <left>可以將值設置為“auto”或者長度值<length>。而且還可以充許負的長度值。其中取值為“auto”時，剪切區域的邊緣和元素盒子邊緣相同。例如：在<top>和<left>設置為auto時，他們就相當於top和left取值為0；如果<right>和<bottom>設置為auto時，他們就相當於元素的寬度（這個寬度包括元素的border、padding和width），或者簡單的理解為100%。

注意：1.值不能設置為百分比。 2.在動畫設置過程里不能使用auto，使用auto沒有動畫效果。

實例說明：

.fixedOne {
    left: 100px;
    top: 100px;
    background: red;
}
    .fixedOne img {
        position: absolute;
            border:5px solid blue;
    }
    /*
        *IE8及以上瀏覽器，Google，FF都支持
        *剪切部分的計算，包含邊框
        *說明，不能使用百分比設置
    */
    /*.fixedOne img {
        clip: rect(5px,auto,auto,0px);
    }*/
    /*.fixedOne img {
        clip: rect(5px,auto,auto,10px);
    }*/
    .fixedOne img {
        clip: rect(5px,105px,50px,2px);
        clip: rect(5px 105px 50px 2px); /*IE87 及以下瀏覽器支持，解決方法*/
    }
    .fixedOne img {
        width: 120%;
        height: 120%;
    }

每個狀態顯示如下：

更多實例：http://www.cnblogs.com/tianma3798/p/5862162.html

參考文章：http://www.w3cplus.com/css3/clip.html