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

定義

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

clip

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

初始值: auto

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

繼承性: 無

[注意]預設值auto表示元素的內容不應剪裁

rect

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

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

[注意]ie7-瀏覽器不支援rect(top,right,bottom,left)，支援的寫法是rec程式設計客棧t(top right bottom left)；而其他瀏覽器兩種寫法都支援

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

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

應用1.隱藏效果

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

2.雪碧圖定位

css sprite

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

優點：　　[1]減少http請求次數

[2]減少大小，提公升網頁載入速度 (多張載入速度小於拼合成的的載入速度)

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

[2]提高維護成本

它能合併的只能是用於背景的：

[1]對於

設定的，是不能合併到大圖的，如果合併這些會影響頁面可讀性，語義化降低且可調整的範圍小。

[2]對於橫向和縱向都平鋪的，也不能使用css cprite,如果是橫向平鋪的，只能將所有橫向平鋪的圖合併成一張大圖，只能豎直排列，不能水平排列；如果是縱向平鋪的，我們只能將所有縱向平鋪的圖合併成一張大圖，只能水平排列，不能豎直排列。

css sprite允許將乙個頁面涉及到的所有零星都包含到一張大圖中，然後利用background-position來顯示應該顯示的區域。

而如果使用clip也可以實現同樣的效果。

css code複製內容到剪貼簿

3.歌詞演示效果

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

css code複製內容到剪貼簿

本文標題: css裁剪屬性clip使用的例項教程

本文位址: /web/css/84185.html