參考部落格:
clip屬性只能在元素設定了「position:absolute」或者「position:fixed」屬性起作用。
clip無法在設定「position:relative」和「position:static」上工作。
clip屬性只接受三個不同的屬性值：
：shape是乙個函式功能，當使用僅使用rect()屬性;
auto：這是乙個預設值，clip設定auto值和沒有進行剪下是一樣的效果;
inherit：繼承父元素的clip屬性值。
看rect()使用方法。rect()需要設定四個值：top, right, bottom和left。他們之間需要用逗號隔開，而且rect()屬性值和margin、padding以及bodrder具有一樣的標準，遵循trbl順時針旋轉的規則。
clip: rect(, , , ); //上、右、下、左 一般控制 右(圖的寬度) 下(圖的高就行) 左(左邊切多少畫素) 上 (上面切多少畫素就ok)
rect()和和指定偏移量是從元素盒子頂部邊緣算起；和指定的偏移量是從元素盒子左邊邊緣算起。
我們簡單的來看乙個例子：
p#one
p#two
上面的例子是在50x55px的長方形盒子中是行剪下，得到虛線的長方形：
, , , 可以將值設定為「auto」或者長度值。而且還可以充許負的長度值。其中取值為「auto」時，剪下區域的邊緣和元素盒子邊緣相同。例如：在和設定為auto時，他們就相當於top和left取值為0；如果和設定為auto時，他們就相當於元素的寬度（這個寬度包括元素的border、padding和width），或者簡單的理解為100%。
針對上面所言，將clip分為以下幾種：
1、不顯示剪下區域：當rect()中的bottom值小於top值，或者right值小於left值時，整個剪下區域不會顯示。例如：
.rect2 img
.rect3 img
2、top和left取值為auto，當top或者left取值為auto時，相當於取值為0；
.rect4 img
.rect5 img {
clip: rect(13px, 164px, 161px, auto);
CSS剪輯 clip 屬性
css clip 剪輯 clip 屬性就像乙個面具。它允許你使用矩形掩蓋頁面元素的內容。要剪輯乙個元素 你必須指定其 position 屬性為 absolute，然後指定相對於元素的 top，right，bottom，left 值。以下示例講解了如何使用 clip 屬性掩蓋一張。首先，指定 元素為 ...
CSS裁剪屬性clip使用的例項教程
定義 乙個絕對定位或固定定位元素通過使用屬性clip可以改變剪裁區域的形狀，但並不改變元素本身的寬高屬性 clip 值 rect top,right,bottom,left auto inherit 初始值 auto 應用於 絕對定位或固定定位元素 繼承性 無 注意 預設值auto表示元素的內容不應...
用css2屬性clip實現網頁進度條
前言 css2的屬性clip 如果你不是很明白clip屬性，那麼我就用大白話來解釋一下，clip rect 0px,0px,0px,0px 有四個值，同理是順時針方向賦值，上右下左，記錄改元素裁切方式，例如 乙個元素div，其width 300px height 300px clip rect 0p...