目錄
一、什麼是Clip屬性
1、定義及用法
①定義
該屬性用於剪裁絕對定位元素。
當一幅圖像的尺寸大於包含它的元素時會發生什麼呢？"clip" 屬性允許您規定一個元素的可見尺寸，這樣此元素就會被修剪並顯示爲這個形狀。
--------解釋來源於W3school.com
通俗一點來說就是：通過使用該屬性可以對某一個元素進行剪裁，只會顯示剪裁後的部分
舉個實栗子：
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>
<body>
<p>clip 屬性剪切了一幅圖像：</p>
<p><img border="0" src="/i/eg_bookasp.gif" width="120" height="151"></p>
</body>
</html>
圖中的書的整張圖被Clip剪切了，只顯示了被剪裁的部分
②用法
這個屬性用於定義一個剪裁矩形。clip屬性只能在元素設置了“position:absolute”或者“position:fixed”屬性起作用。clip無法在設置“position:relative”和“position:static”上發揮作用。
|
默認值： |
auto |
|
繼承性： |
no |
|
版本： |
CSS2 |
|
JavaScript 語法： |
object.style.clip="rect(0px,50px,50px,0px)" |
可能的值
|
值 |
描述 |
|
shape |
shape是一個函數功能，設置元素的形狀。唯一合法的形狀值是：rect (top, right, bottom, left) |
|
auto |
這是一個默認值，clip設置auto值和沒有進行剪切是一樣的效果。 |
|
inherit |
規定應該從父元素繼承 clip 屬性的值。 |
- 瀏覽器支持
所有主流瀏覽器都支持 clip 屬性。
註釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
- Rect()使用
- 基本語法
rect()需要設置四個值：top, right, bottom和left。
rect()屬性值和margin、padding以及bodrder都遵循TRBL順時針旋轉的規則。
rect (top, right, bottom, left);
在CSS2.1中，rect()和<top>和<bottom>指定偏移量是從元素盒子頂部邊緣算起；<left>和<right>指定的偏移量是從元素盒子左邊邊緣算起。
來張圖片你就懂了
- 實例解析
在50X55px的長方形盒子中是行剪切，得到虛線的長方形：
p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }
<top>, <right>, <bottom>, <left>可以將值設置爲“auto”或者長度值<length>，還可以充許負的長度值。
<top>和<left>的值爲auto時，就相當於top和left取值爲0；
<right>和<bottom>的值auto時，就相當於元素的寬度（這個寬度包括元素的border、padding和width），或者簡單的理解爲100%。
舉個栗子：
top取值爲0時
.rect6 img {
clip: rect(13px, auto, 161px, 30px);}
left取值爲0
.rect7 img {
clip: rect(13px, 164px, auto, 30px);}
注意：
特殊情況：rect()中的bottom值小於top值，或者right值小於left值時
拿這張圖舉例：
Left應該是在right的左邊，結果現在left的值還比right大，也就是說現在left跑到了right的右邊
這似乎有點不符合邏輯，那這樣的話會怎樣顯示呢？
我們假設這是一張這張圖，把left這條邊取名爲A，right這條邊取名爲B(方便區分而已)
假設A在B的左邊的時候爲正常放置在桌面上，能完全看到照片是什麼，然兒現在A卻在B的右邊，也就是相當於把照片翻了過來，現在這張照片你會看不到它是什麼。
所以當rect()中的bottom值小於top值，或者right值小於left值時不顯示剪切區域
- 案例
通過clip實現行內sprites的效果
要製作上圖的一個效果，一般來說都是使用三個圖來製作，現在我們可以使用clip屬性在行內使用sprites圖來實現上圖的效果，至於這兩者的區別看看對比圖就都能知道了。
通過使用clip屬性讓三張圖合三爲一，能降低圖片總大小，減少對瀏覽器的負擔
代碼部分：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clip demo</title>
<style>
* {
margin:0;
padding: 0;
}
#wrapper {
position: relative;
width: 386px;
margin:50px auto;
list-style: none outside none;
}
#wrapper li {
width: 128px;
height: 128px;
float: left;
position: relative;
}
.icons {
position:absolute;
top:0;
left:0;
}
.happy {
clip: rect(0 256px 128px 128px);
left:-128px;
}
.angry {
clip: rect(0 384px 128px 256px);
left:-256px;
}
.sad {
clip: rect(0 128px 128px 0);
}
</style>
</head>
<body>
<ul id="wrapper">
<li><img src="icons.png" alt="Happy Icon" class="icons happy" /></li>
<li><img src="icons.png" alt="Sad Icon" class="icons sad" /></li>
<li><img src="icons.png" alt="Angry Icon" class="icons angry" /></li>
</ul>
</body>
</html>
實例
