css中的clip屬性是乙個比較有用的屬性,但在實際應用中卻很少用到,在使用clip屬性時需要注意以下兩點:
一、clip屬性必須和定位屬性postion一起使用才能生效。
二、clip裁切的計算座標都是以左上角即(0,0)點開始計算,如圖三所示,這點不像padding和margin,它們兩個的右邊距和下邊距是從最右邊和最下邊開始計算的。
clip屬性基礎語法:
clip : auto | rect ( number number number number )
取值:
auto : 預設值。物件無剪下
rect ( number number number number ) : 依據上-右-下-左的順序提供自物件左上角為(0,0)座標計算的四個偏移數值,其中任一數值都可用 auto 替換,即此邊不剪下
clip屬性說明:
檢索或設定物件的可視區域。可視區域外的部分是透明的。
此屬性定義了絕對(absolute)定位物件可視區域的尺寸。必須將 position 屬性的值設為 absolute ,此屬性方可使用。
自ie5開始,此屬性在mac平台上可用。
對應的指令碼特性為 clip 。
css中的clip屬性除了可以製作彩色文字外,還可以有效地裁切其他網頁中的元素。
clip屬性設定元素的形狀。這個屬性用於定義乙個剪裁矩形。在這個矩形內的內容才可見,出了這個剪裁區域的內容和 overflow:hidden 的效果相同。剪裁區域可能比元素的內容區大,也可能比內容區小。
clip屬性值:auto | rect (top, right, bottom, left)
auto代表不裁切,rect中的上右下左四個方向填入的應是數值,表示裁切的位置。
下面我舉乙個對進行裁切的簡單例子。
首先準備一張,如圖一中所示,它的尺寸是159px*99畫素。我打算利用clip屬性將進行裁切,只讓圖中的大紅點顯示出來。
我先製作乙個放置的div外框,它的css定義如下:
#imgclip
這個div的定位屬性設定為相對定位是為了讓以它為定位標準,將背景定義為#fff985是為了讓顯示效果更明顯。
然後定義的裁切屬性,css定義如下:
#imgclip img
這裡的絕對定位是相對於id為imgclip的div而言的,clip中的數值按照上右下左的順序排列的。
html**:
CSS剪輯 clip 屬性
css clip 剪輯 clip 屬性就像乙個面具。它允許你使用矩形掩蓋頁面元素的內容。要剪輯乙個元素 你必須指定其 position 屬性為 absolute,然後指定相對於元素的 top,right,bottom,left 值。以下示例講解了如何使用 clip 屬性掩蓋一張。首先,指定 元素為 ...
Css3 clip屬性解析
參考部落格 clip屬性只能在元素設定了 position absolute 或者 position fixed 屬性起作用。clip無法在設定 position relative 和 position static 上工作。clip屬性只接受三個不同的屬性值 shape是乙個函式功能,當使用僅使用...
CSS裁剪屬性clip使用的例項教程
定義 乙個絕對定位或固定定位元素通過使用屬性clip可以改變剪裁區域的形狀,但並不改變元素本身的寬高屬性 clip 值 rect top,right,bottom,left auto inherit 初始值 auto 應用於 絕對定位或固定定位元素 繼承性 無 注意 預設值auto表示元素的內容不應...