【轉載】CSS3之Clip（裁剪）拓展閱讀
Clip屬性是大家經常會誤解的一個屬性，這篇文章幫助大家充分的了解和學習clip屬性，用這個屬性制作出更好的效果。
我可以確定Clip屬性有很多同學並不知道，因為這個屬性使用率非常的底，我初次接觸是在Drupal的主題之中，他們有一段用來隱藏文本的代碼，就是使用的clip屬性。
/* Hide only visually, but have it available for screenreaders*/ .visuallyhidden { border: 0 none !important; clip: rect(1px 1px 1px 1px);/*IE<8*/ clip: rect(1px,1px,1px,1px); height: 1px !important; margin: -1px; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px; } 如果你不知道也不用擔心，接下來的內容將會涵蓋clip屬性的各個方法。詳細閱讀這篇文章，你將對clip屬性有一個很深的了解。
Clip屬性在W3C官網是這樣進行描述的：“通過對元素進行剪切來控制元素的可顯示區域，默認情況下，元素是不進行任何剪切的，但是也有可能剪切區域也顯示的設置了clip屬性”。
大家應該看過使用javascript的插件來剪切元素，但是你也可以使用CSS的clip屬性實現，也許會有一些限制，但我們可以一起看看。
語法：
想要了解clip屬性，我們很有必要先學習clip的語法知識：
.selector { clip: <shape> auto inherit } 首先你要註意：clip屬性只能在元素設置了“position:absolute”或者“position:fixed”屬性起作用。clip無法在設置“position:relative”和“position:static”上工作。
說實話,我真的不知道為什麽是這樣的。至少,我在網絡上沒有發現任何有關於這方面的話題,因此,如果你要是知道為什麽，希望您能在下面的評論中分享一些知識。
上面的語法告訴我們，clip屬性只接受三個不同的屬性值：
- <shape>：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(<top>, <right>, <bottom>, <left>);
在CSS2.1中，rect()和<top>和<bottom>指定偏移量是從元素盒子頂部邊緣算起；<left>和<right>指定的偏移量是從元素盒子左邊邊緣算起。
我們簡單的來看一個例子：
p#one { clip: rect(5px, 40px, 45px, 5px); } p#two { clip: rect(5px, 55px, 45px, 5px); }
上面的例子是在50X55px的長方形盒子中是行剪切，得到虛線的長方形：
<top>, <right>, <bottom>, <left>可以將值設置為“auto”或者長度值<length>。而且還可以充許負的長度值。其中取值為“auto”時，剪切區域的邊緣和元素盒子邊緣相同。例如：在<top>和<left>設置為auto時，他們就相當於top和left取值為0；如果<right>和<bottom>設置為auto時，他們就相當於元素的寬度（這個寬度包括元素的border、padding和width），或者簡單的理解為100%。
針對上面所言，將clip分為以下幾種：
1、不顯示剪切區域：當rect()中的bottom值小於top值，或者right值小於left值時，整個剪切區域不會顯示。例如：
.rect2 img { clip: rect(13px,0,161px,30px);/*right值小於left值*/ } .rect3 img { clip:rect(13px, 164px, 0, 30px);/*bottom值小於top值*/ }
2、top和left取值為auto，當top或者left取值為auto時，相當於取值為0；
.rect4 img { clip: rect(auto, 164px, 161px, 30px); } .rect5 img { clip: rect(13px, 164px, 161px, auto); }
rect(auto,164px,161px,30px)效果
rect(13px,164px,161px,auto)效果
3、bottom和right取值為auto，當bottom和right取值為auto時，相當於元素的100%寬度。
.rect6 img { clip: rect(13px, auto, 161px, 30px); } .rect7 img { clip: rect(13px, 164px, auto, 30px); }
rect(13px,auto,161px,30px)效果
rect(13px,164px,auto,30px)效果
3、bottom和right取值為auto，當bottom和right取值為auto時，相當於元素的100%寬度。
詳細點擊demo。
rect()不能支持百分比值，這一點需要特別的註意。
瀏覽器兼容性
你可能會很關註，這個屬性的兼容性不知道如何？請放心，clip屬性得到較好的支持，在chrome1.0+、firefox1.0+、opera7.0+、safari1.0+和ie8.0+都支持標準語法，但在ie4.0至ie7.0我們還是需要做一定的處理，需要把每個屬性值之間的逗號去掉。
.my-element { position: absolute; clip: rect(10px 350px 170px 0); /* IE4 to IE7 */ clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */ }
需要特別的註意，ie4-ie7的要寫在標準語句的前面，不然其他瀏覽器下將會無任何效果。
案例
上面是各種理論的講解，接下來我們一起來動手做一個案例，通過clip實現行內sprites的效果。
要制作上圖的一個效果，我們平時都是使用三個圖來制作，那麽使用clip屬性我們也可以在行內使用sprites圖來實現上圖的效果，這兩者的區別我就不多說，大家看看他們的對比截圖：
圖中說明一切，接下來我們主要看的是如何使用clip實現效果，先寫個簡單的HTML結構：
<ul id="wrapper"&ht; <li&ht;<img src=http://www.webjx.com/css/"icons.png" alt="Happy Icon" class="icons happy" /&ht;</li&ht; <li&ht;<img src=http://www.webjx.com/css/"icons.png" alt="Sad Icon" class="icons sad" /&ht;</li&ht; <li&ht;<img src=http://www.webjx.com/css/"icons.png" alt="Angry Icon" class="icons angry" /&ht;</li&ht; </ul&ht;
一個很簡單的結構，初步的效果如下：
先來給他一個基本布局樣式：
* { margin:0; padding: 0; } #wrapper { position: relative; width: 386px; margin:50px auto; list-style: none outside none; } #wrapper li { width: 128px; height: 128px; float: left; position: relative; }
此時效果如下：
這離我們需要的效果還相差很遠，接下來就需要clip來發揮他的功能了，我們簡單先分析一下，對於這三個臉譜，距離頂部的距離都是“0”而距離底部都是“128px”，這樣我們就確定兩個參數了，只需要對每個臉譜確定left和right的參數。
先來看sad膾，他是在sprites圖片的最左邊，那麽我們可以明顯的確定他的另外兩個值：left為0;right為128px，如下圖所示：
對於happy臉，我們在sprites圖中間，根據相關參數，我們可以推算或者測量出其left值為128px，right值為256px，但這個時候有一個細節，我們使用clip進行剪切，前面會留有空白（也就是sad臉位置）,為了能正常顯示，需要在這個Img中設置一個left值為“-128px”,將happy拉出來：
最後一張是angry臉，按前面的方法我們很容易的得到left值為256px，right值為384px(在這裏也可以是auto，前面有講過)，同樣前面有占位的，也需要用left值拉回來：
詳細代碼如下：
.icons { position:absolute; top:0; left:0; } .happy { clip: rect(0 256px 128px 128px); left:-128px; } .angry { clip: rect(0 384px 128px 256px); left:-256px; } .sad { clip: rect(0 128px 128px 0); }
如此一來，效果就出來了，大家可以點擊這裏查看效果。
這裏展示的是僅是其中一個很簡單的案例效果，其實你可以發揮你的想像力，配合一些css3的特效制作出一些很酷的效果。
這是一個很特殊的屬性，也是一個很少見的屬性，少見是由於他不被人了解，雖然他受限蠻多，但在一些情況下使用這個屬性能輕松的幫你實現你需要的效果。而且這個屬性使用也並不復雜。通過上面的介紹，大家應該對clip有所了解了。希望這篇文章能對大家有所收獲。
【轉載】CSS3之Clip（裁剪）拓展閱讀