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

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

clip

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

　　初始值: auto

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

　　繼承性: 無

　　[注意]默認值auto表示元素的內(nèi)容不應剪裁

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

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

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

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

　　[注意]該元素水平方向或垂直方向的clip區(qū)域的邊界是外框外側(cè)，不包括outline

應用
1.隱藏效果

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

2.雪碧圖定位
css sprite

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

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

缺點：
　　[1]提高開發(fā)成本
　　[2]提高維護成本

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

css sprite允許將一個頁面涉及到的所有零星圖片都包含到一張大圖中，然后利用background-position來顯示應該顯示的區(qū)域。
而如果使用clip也可以實現(xiàn)同樣的效果。

3.歌詞演示效果

　　利用clip和background-clip實現(xiàn)歌詞演示效果，實際上通過改變寬度也可以實現(xiàn)，主要用于拓展思路。

最新評論