CSSclip屬性是什麼呢

大家知道CSSclip屬性是什麼嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

一、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 {

position:relative;

width:159px;

height:99px;

background:#FFF985;

margin:0 auto;

}

這個div的定位屬性設置為相對定位是為了讓圖片以它為定位標准，將背景定義為#FFF985是為了讓顯示效果更明顯。

然後定義圖片的裁切屬性，CSS定義如下：

#imgClip img {

position:absolute;

clip:rect(21px 68px 51px 38px);

}

相信大家已經學會CSSclip屬性是什麼了吧!感謝大家對我們網站的支持!

相關推薦：

什麼是CSS呢