clip屬性詳解

2021-06-07 06:01:12 字數 1202 閱讀 4340

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表示元素的內容不應...