CSS裁剪屬性clip使用的實例教程

CSS裁剪clip這個屬性平時用的不多，但其實它并不是CSS3的新屬性，很早就開始出現了。本文將介紹關于clip屬性的相關知識

定義
　　一個絕對定位或固定定位元素通過使用屬性clip可以改變剪裁區域的形狀，但并不改變元素本身的寬高屬性

clip

　　值: rect(top,right,bottom,left) | auto | inherit

　　初始值: auto

　　應用于: 絕對定位或固定定位元素

　　繼承性: 無

　　[注意]默認值auto表示元素的內容不應剪裁
201641115122867.png (225×154)

rect
　　clip:rect(top,right,bottom,left)中的值不是邊偏移，而是距元素左上角的距離。具體來說，就是top和bottom是表示距離元素上邊界的距離；left和right是距離元素元素左邊界的距離。這里元素的邊界指元素邊框外側。

　　rect(...)的語法與CSS的其他語法相比不太一樣。原因是它基于早期的定位草案，而該草案使用了左上偏移機制。在CSS2之前，實現這個語法的IE已經成為完備推薦，于是標準從邊偏移修改成適用這個實現。但是，這意味著如果高度和寬度沒有明確定義，將無法設置一致的剪裁區域。

　　[注意]IE7-瀏覽器不支持rect(top,right,bottom,left)，支持的寫法是rect(top right bottom left)；而其他瀏覽器兩種寫法都支持

　　clip:rect(...)只允許長度值和auto，不允許有百分數。如果設置為auto，則相當于將剪裁邊界設置為適當的內容邊界。對于top或left設置auto，相當于值為0；對于right或bottom設置auto，相當于值為水平方向的寬度和或垂直方向的高度和

　　[注意]該元素水平方向或垂直方向的clip區域的邊界是外框外側，不包括outline
201641115154651.png (288×111)

應用
1.隱藏效果

　　當clip:rect(top,right,bottom,left)中的top>=bottom，或者left>=right時，可實現元素的隱藏效果，效果類似于visibility:hidden;

2.雪碧圖定位
css sprite

定義：css sprite是一種網頁圖片應用處理方式，它允許將一個頁面涉及到的所有零星圖片都包含到一張大圖中

優點：
　　[1]減少http請求次數
　　[2]減少圖片大小，提升網頁加載速度 (多張圖片加載速度小于拼合成的圖片的加載速度)

缺點：
　　[1]提高開發成本
　　[2]提高維護成本

它能合并的只能是用于背景的圖片：
　　[1]對于<img src=""/>設置的圖片，是不能合并到大圖的，如果合并這些圖片會影響頁面可讀性，語義化降低且可調整的范圍小。
　　[2]對于橫向和縱向都平鋪的圖片，也不能使用css cprite,如果是橫向平鋪的，只能將所有橫向平鋪的圖合并成一張大圖，只能豎直排列，不能水平排列；如果是縱向平鋪的，我們只能將所有縱向平鋪的圖合并成一張大圖，只能水平排列，不能豎直排列。
201641115257568.jpg (829×382)