CSS3 clip

admin發表於2018-08-23
CSSS3

clip翻譯成中文是"裁切"之意；顧名思義，在css中，clip屬性是用來對元素進行裁切。

特別說明：此屬性已經從標準中刪除，不推薦使用。

語法結構:

[CSS] 純文字檢視 複製程式碼
clip: <shape> | auto | inherit

引數解釋:

（1）.<shape>:一個函式屬性，當前只支援rect()，或許在以後會新增更多的函式屬性。

（2）.auto:預設，不裁切，對於top和left，值相當於等於0px，對於bottom和right，值相當於等於100%。

（3）.inherit:繼承父元素的clip屬性。

特別說明：clip只對絕對定位元素有效，也就是採用position:absolute或者postion:fixed的元素有效。

一.rect()的使用：

[CSS] 純文字檢視 複製程式碼
clip: rect(<top>, <right>, <bottom>, <left>)

rect中各個引數值的順序與padding和margin是一樣的。

rect翻譯成中文是矩形的意思，此函式的目的是從指定元素上裁切下一個矩形。

裁切方式如下：

（1）.top和bottom屬性都是以上邊緣為基準向下進行裁切，沒有重合的部分就是我們需要的地方。

（2）.left和right屬性都是以左邊緣為基準向右進行裁切，沒有重合的部分就是我們需要的地方。

圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/23/010903zhnzemkb1wix1wix.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上圖中白色的區域就是被裁剪獲取的區域，已經演示的很清楚了這裡就不再介紹。

程式碼如下：

[CSS] 純文字檢視 複製程式碼
clip:rect(15px,50px,45px,5px);

值之間用逗號分隔，不能用百分比表示各個引數值，下面通過程式碼對此屬性進行一下演示。

為了更為清晰的進行演示，使用以下背景圖：

a:3:{s:3:\"pic\";s:43:\"portal/201808/23/010908uzzfnbzp7tl2t5ao.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

以上圖片是309x99，分隔為9份，每一份的長寬分別是103px和33px。

二.程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  position:absolute;
  width:309px;
  height:99px;
  background-image:url(mytest/demo/mybg.png); 
  clip:rect(0px,103px,33px,0px); 
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上程式碼可以將序號為1的矩形區域裁切出來。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  position:absolute;
  width:309px;
  height:99px;
  background-image:url(mytest/demo/mybg.png); 
  clip:rect(66px,206px,99px,103px); 
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上程式碼可以將序號為8的矩形區域裁切出來。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  position:absolute;
  width:309px;
  height:99px;
  background-image:url(mytest/demo/mybg.png); 
  clip:rect(auto,auto,33px,103px); 
}
</style>
</head>
<body>
<div></div>
</body>
</html>

以上程式碼可以將序號為2和3的矩形區域裁切出來，top為auto時相當於為0px，right為auto時相當於為100%。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  position:absolute;
  width:309px;
  height:99px;
  background-image:url(mytest/demo/mybg.png); 
  clip:rect(66px,206px,33px,103px); 
}
</style>
</head>
<body>
<div></div>
</body>
</html>

相容性問題：

總體來講此屬性的相容性不錯，谷歌、火狐和IE7以上的瀏覽器都支援此屬性的標準語法，但是IE6和IE7在語法的格式上有一些小的區別，程式碼如下:

[CSS] 純文字檢視 複製程式碼
clip:rect(0px 103px 33px 0); /*IE6和IE7*/
clip:rect(0px,103px,33px,0px); /* IE7以上和其他標準瀏覽器*/

標準寫法，值與值之間用逗號分隔，在IE6和IE7中用空格分隔。

相關文章