CSS clip屬性基本語法解析
本文向大家簡單介紹一下CSS clip屬性用法，應(yīng)用clip屬性需要注意的兩點(diǎn)，***點(diǎn)就是clip屬性必須和定位屬性postion一起使用才能生效，另外一點(diǎn)就是clip裁切的計(jì)算坐標(biāo)都是以左上角即（0,0）點(diǎn)開始計(jì)算，這點(diǎn)不像padding和margin，它們兩個(gè)的右邊距和下邊距是從最右邊和最下邊開始計(jì)算的。
CSS clip屬性用法解析
clip屬性是一個(gè)比較有用的屬性，但往往在實(shí)際應(yīng)用中并不多見，這里向大家簡單描述一下，應(yīng)用clip屬性需要注意的兩點(diǎn)：
一、clip屬性必須和定位屬性postion一起使用才能生效。
二、clip裁切的計(jì)算坐標(biāo)都是以左上角即（0,0）點(diǎn)開始計(jì)算，這點(diǎn)不像padding和margin，它們兩個(gè)的右邊距和下邊距是從最右邊和最下邊開始計(jì)算的。
clip屬性基礎(chǔ)語法：
示例代碼
- clip:auto|rect(numbernumbernumbernumber)
取值：
auto: 默認(rèn)值。對象無剪切
rect(numbernumbernumbernumber): 依據(jù)上-右-下-左的順序提供自對象左上角為(0,0)坐標(biāo)計(jì)算的四個(gè)偏移數(shù)值，其中任一數(shù)值都可用auto替換，即此邊不剪切
clip屬性說明：
檢索或設(shè)置對象的可視區(qū)域。可視區(qū)域外的部分是透明的。
此屬性定義了絕對(absolute)定位對象可視區(qū)域的尺寸。必須將position屬性的值設(shè)為absolute，此屬性方可使用。
自IE5開始，此屬性在MAC平臺(tái)上可用。
對應(yīng)的腳本特性為clip。
CSS中的clip屬性除了可以制作彩色文字外，還可以有效地裁切其他網(wǎng)頁中的元素。
clip屬性設(shè)置元素的形狀。這個(gè)屬性用于定義一個(gè)剪裁矩形。在這個(gè)矩形內(nèi)的內(nèi)容才可見，出了這個(gè)剪裁區(qū)域的內(nèi)容和overflow:hidden的效果相同。剪裁區(qū)域可能比元素的內(nèi)容區(qū)大，也可能比內(nèi)容區(qū)小。
clip屬性值：auto|rect(top,right,bottom,left)
auto代表不裁切，rect中的上右下左四個(gè)方向填入的應(yīng)是數(shù)值，表示裁切的位置。
下面我舉一個(gè)對圖片進(jìn)行裁切的簡單例子,首先準(zhǔn)備一張圖片，它的尺寸是159px*99像素。我打算利用clip屬性將圖片進(jìn)行裁切，只讓圖中的大紅點(diǎn)顯示出來。我先制作一個(gè)放置圖片的div外框，它的CSS定義如下：
示例代碼
- #imgClip{
- position:relative;
- width:159px;
- height:99px;
- background:#FFF985;
- margin:0auto;
- }
這個(gè)div的定位屬性設(shè)置為相對定位是為了讓圖片以它為定位標(biāo)準(zhǔn)，將背景定義為#FFF985是為了讓顯示效果更明顯。然后定義圖片的裁切屬性，CSS定義如下：
示例代碼
- #imgClipimg{
- position:absolute;
- clip:rect(21px68px51px38px);
- }
這里的絕對定位是相對于id為imgClip的div而言的，clip中的數(shù)值按照上右下左的順序排列的。
html代碼：
示例代碼
- <dividdivid="imgClip">
- <imgsrcimgsrc="http://www.mb5u.com/img/logo.gif"
- width="159"height="99"/>
- </div>
【編輯推薦】
- 跨瀏覽器兼容的四大CSS編碼準(zhǔn)則
- 技術(shù)分享 如何實(shí)現(xiàn)CSS橫向?qū)Ш?/a>
- CSS導(dǎo)航菜單的四個(gè)優(yōu)點(diǎn)
- DIV CSS網(wǎng)頁制作一般流程
- DIV CSS解決不規(guī)則文字排版問題
