怎么剪切css中的元素以及如何使用clip屬性？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出彭水苗族土家族免費做網(wǎng)站回饋大家。

在css中，clip屬性只能在設(shè)置了絕對定位：“position:absolute”或者固定定位：“position:fixed”屬性的元素上起作用。它對設(shè)置了相對定位：“position:relative”或靜態(tài)定位：“position:static”屬性的元素上沒有任何影響。

使用時clip，我們可以指定向內(nèi)的偏移量，以指定要剪切的元素邊緣的區(qū)域。

clip屬性僅接受一個形狀函數(shù)，即rect()函數(shù)，作為值。下面我們來看看rect()函數(shù)基本語法：

rect(< top >，< right >，< bottom >，< left >);

我們可以看出，rect()函數(shù)采用四個參數(shù)，這些參數(shù)分別是從元素的頂部和左側(cè)邊界向內(nèi)偏移的偏移量。

頂部和底部值都定義來自頂部邊界的偏移，而左邊和右邊值都定義來自左邊邊界的偏移。

顯示剪輯屬性偏移量

裁剪區(qū)域或在裁剪元素后保持可見的元素部分由rect()函數(shù)的偏移量定義，rect()函數(shù)可以創(chuàng)建的矩形形狀，如上圖所示。

元素的剪切區(qū)域會把剪切區(qū)域之外的元素的任何方面（例如，內(nèi)容，子項，背景，邊框，文本修飾，輪廓等）剪切掉。已剪切的內(nèi)容不會導(dǎo)致溢出。

clip屬性的使用

基本語法：

clip: auto | rect() | inherit;

rect() 函數(shù)的語法：

rect(, , , )

, , , 里都是使用長度值來設(shè)置的

說明：

1、auto：該元素未被剪裁。

2、inherit：元素從其父級繼承其clip值。

3、rect()：指定矩形剪切區(qū)域。也就是說，它指定在剪切元素后的可見的元素區(qū)域是矩形的。

rect()函數(shù)有四個參數(shù)。這些參數(shù)可以是逗號分隔或空格分隔。

rect（< top >，< right >，< bottom >，< left >）/ *標(biāo)準(zhǔn)語法* /
/* 要么 */
rect（< top >  < right >  < bottom >  < left >）/ *向后兼容語法* /

rect()函數(shù)還接受關(guān)鍵字auto作為偏移量。值auto表示裁剪區(qū)域的給定邊緣將與元素的邊界框的邊緣相同。

rect()函數(shù)的參數(shù)：頂部，右側(cè)，底部和左側(cè)偏移也接受負(fù)長度值。

例：元素的部分垂直地保持在“40px”和“150px”之間，并且水平地保持在“80px”和“260px”之間

img {     
   clip：rect（275px，575px，425px，365px）;
}

效果圖：

顯示剪切元素后的可見區(qū)域示例

在Internet Explorer 4到7支持較舊的空格分隔語法，因此為了確保剪輯在這些瀏覽器中有效，我們可以兩種方法都寫上：

img {     
    clip：rect（40px 260px 150px 80px）; / * IE 4到7 * / 
    clip：rect（40px，260px，150px，80px）; / * IE8 +和其他瀏覽器* /
}

clip屬性的示例：

html代碼：

  

   在四個圖像上懸停，以查看它們的剪輯區(qū)域展開。
  
  

    
  
  

    
  
  

    
  
  

    
  

css代碼：

.container {
  margin: 40px auto;
  width: 300px;
  position: relative;
}

.element {
  width: 300px;
  height: 300px;
  z-index: 0;
  position: absolute;
  -webkit-transition: clip .4s ease-in-out, z-index .2s linear .4s;
  transition: clip .4s ease-in-out, z-index .2s linear .4s;
}

img {
  max-width: 100%;
}

.element-1 {
  background-color: #2c3e50;
  clip: rect(0px, 150px, 150px, 0px);
}

.element-2 {
  background-color: #f39c12;
  clip: rect(0px, 300px, 150px, 150px);
}

.element-3 {
  background-color: #16a085;
  clip: rect(150px, 150px, 300px, 0px);
}

.element-4 {
  background-color: #8e44ad;
  clip: rect(150px, 300px, 300px, 150px);
}

.element:hover {
  z-index: 1;
  -webkit-transition: clip .4s ease-in-out .2s, z-index .2s linear;
  transition: clip .4s ease-in-out .2s, z-index .2s linear;
  clip: rect(0px, 300px, 300px, 0px);
}

效果圖：

瀏覽器支持度

所有主流瀏覽器都支持clip屬性：Chrome，F(xiàn)irefox，Safari，Opera，Internet Explorer以及Android和iOS。

Internet Explorer版本7回到4支持舊的空格分隔rect()語法。從IE8開始支持標(biāo)準(zhǔn)的逗號分隔語法。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。