如果網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)絕對(duì)定位元素的內(nèi)容溢出其內(nèi)容框，而且overflow設(shè)置為要求剪裁該內(nèi)容，通過(guò)使用屬性clip可以改變剪裁區(qū)域的形狀。

默認(rèn)值auto表示元素的內(nèi)容不應(yīng)剪裁。還可以相對(duì)于元素內(nèi)容區(qū)定義一個(gè)剪裁形狀。這不會(huì)改變內(nèi)容區(qū)的形狀，而只是改變將顯示內(nèi)容的區(qū)域形狀。

注意：盡管網(wǎng)站建設(shè)CSS2中唯一可用的剪裁形狀是矩形，不過(guò)規(guī)范確實(shí)指出，在將來(lái)的規(guī)范中可能會(huì)有其他形狀，

clip

值：rect(top,right, bottom,left)| auto | inherit

初始值：auto

應(yīng)用于：絕對(duì)定位元素（在CSS2中，clip應(yīng)用于塊級(jí)元素和替換元素）

繼承性：無(wú)

計(jì)算值：對(duì)于矩形，4個(gè)計(jì)算長(zhǎng)度表示剪裁矩形區(qū)域的4個(gè)邊，否則，根據(jù)指定確定

這是利用形狀值rect實(shí)現(xiàn)的。可以如下指定剪裁區(qū)域內(nèi)不做修改：

clip: recc(0, auto, auto, 0)；

網(wǎng)頁(yè)設(shè)計(jì)rect的語(yǔ)法很有意思。從技術(shù)上講，可以是rect(top, right,bottom,left)，注意這里的逗號(hào)，不過(guò)網(wǎng)站建設(shè)CSS2規(guī)范提供的例子中有些有逗號(hào)，有些沒(méi)有逗號(hào)，而且將rect定義為這兩種版本都能接受。在此，我們還是采用有逗號(hào)的版本，主要是因?yàn)檫@樣更島讀，而且這是網(wǎng)站建設(shè)CSS2.1中推薦的做法。

有一點(diǎn)極為重要，rect(...）的值不是邊偏移，而是距元素左上角的距離（在從右向左讀的語(yǔ)言中，則是與元素右上角的距離）。因此，如果一個(gè)剪裁矩形涵蓋元素左上角20 x 20像素的一個(gè)正方形，可以定義如下：

rect(0, 20px, 20px, 0)

rect (...)只允許長(zhǎng)度值和auto，如果設(shè)置為auto，這相當(dāng)于將剪裁邊界設(shè)置為適當(dāng)?shù)膬?nèi)容邊界。因此，以下兩個(gè)語(yǔ)句含義相同：

clip: rect(auto, auto, 10px, 1em);

clip: rect(0, 0, 10px, 1em);

由于網(wǎng)頁(yè)設(shè)計(jì)中clip中的所有偏移都是距左上角的偏移，所以不允許有百分?jǐn)?shù)，實(shí)際上不可能創(chuàng)建一個(gè)“中心”剪裁區(qū)域，除非你知道元素本身的大小?？紤]以下情況：

div#sidebar {position: absolute; top: 0; bottom: 50%; right: 50%; left: 0; clip: rect(1em,4em,6em,1em)；)

由于無(wú)法知道元素會(huì)有多高或多寬，所以無(wú)法定義這樣一個(gè)剪裁矩形，要求它最后在元素內(nèi)容區(qū)向右1em或向下1em處。要想知道元素的大小，唯一的辦法就是設(shè)置元素本身的高度和寬度：

div#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em;

clip: rect(1em,4em,6em,1em);}

這會(huì)得到如圖10-34所示的結(jié)果，這里增加了一個(gè)虛線表示剪裁區(qū)域的邊界。這條線在顯示文檔的用戶代理中并不會(huì)真的出現(xiàn)。

不過(guò)，網(wǎng)頁(yè)設(shè)計(jì)人員可以設(shè)置負(fù)長(zhǎng)度值，這會(huì)使剪裁區(qū)域延伸到元素框之外。如果你想將剪裁區(qū)域向上向左移0.25英寸，可以使用以下樣式（如圖10-35所示）

clip: rect(-0.25in, auto, auto,-0.25in);

可以看到，這沒(méi)什么好處。盡管剪裁區(qū)域向上向左延伸了，不過(guò)由于延伸區(qū)域內(nèi)沒(méi)有任何內(nèi)容，所以沒(méi)有多大差別。

另一方面，完全可以超越下邊界和右邊界，但不能超越上邊界或左邊界。圖10-36顯示了以下樣式的結(jié)果（要記住，這里的虛線只是為了說(shuō)明，并不實(shí)際存在?。?/p>

div#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em; clip: rect(0,6em,9em,0);}

這會(huì)擴(kuò)展可以看到內(nèi)容的區(qū)域。不過(guò)，內(nèi)容流并沒(méi)有改變，所以唯一的視覺(jué)效果就是元素下面可以看到更多的內(nèi)容。文本沒(méi)有向右流，因?yàn)槠湫锌虻膶挾热允芏ㄎ辉貙挾鹊南拗?。如果有一個(gè)比定位元素寬的圖像，或者有一個(gè)很長(zhǎng)的預(yù)定義格式文本行，則可能在定位元素的右邊也可見(jiàn)（直到剪栽區(qū)域結(jié)束的位置）。

網(wǎng)頁(yè)設(shè)計(jì)人員可能已經(jīng)認(rèn)識(shí)到，rect(...)的語(yǔ)法與網(wǎng)站建設(shè)CSS的其他語(yǔ)法相比不太一樣。原因是它基于早期的定位草案，而該草案使用了左上偏移機(jī)制。在CSS2之前，實(shí)現(xiàn)這個(gè)語(yǔ)法的Internet Explorer巳經(jīng)成為完備推薦，所以它與最終的rect (...)語(yǔ)法沖突，因?yàn)樽詈笠呀?jīng)將rect(...)修改為使用邊偏移（類似于CSS2的其余部分）。這么做是為了保證定位一致，這是合情合理的。

圖10-36：剪裁區(qū)域從元素框向下向右延伸

不過(guò)，等到這個(gè)時(shí)候已經(jīng)太晚了：市場(chǎng)上已經(jīng)有了具體實(shí)現(xiàn)，所以沒(méi)有要求Microsoft修改瀏覽器（因?yàn)檫@可能破壞現(xiàn)有的頁(yè)面），而是將標(biāo)準(zhǔn)修改為適應(yīng)這個(gè)實(shí)現(xiàn)。遺憾的是，正如前面所看到的，這意味著如果高度和寬度沒(méi)有明確定義，將無(wú)法設(shè)置一致的剪裁區(qū)域。

rect(...)只接受長(zhǎng)度單位和auto，這使問(wèn)題更為嚴(yán)重。要讓百分?jǐn)?shù)單位也成為合法的rect (...)值可能還有很長(zhǎng)的一段路要走，也許將來(lái)的網(wǎng)站建設(shè)CSS版本會(huì)增加這個(gè)功能。

警告：從clip悠久復(fù)雜的歷史可以看出，當(dāng)前瀏覽器中clip的實(shí)現(xiàn)方式并不一致，在所有跨瀏覽器的環(huán)境中都不能指望clip肯定采用某一種方式實(shí)現(xiàn)。