點擊上方藍字關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

提到clip這個屬性，估計好多同學不知道，因為它的使用率比較底，我是14年做H5的時候使用過它，當時用這個屬性做了一個圖片載入loading效果，對，這個loading的例子也就是這篇文章要說的一個實例，在說這個實例之前，先來看一下這個屬性是怎麼用的。

一、理解它的使用

它的定義是這樣的：clip屬性剪裁絕對定位元素。

clip：|auto|inherit

上面這個語法格式，目前來看，我覺得是可以忽略的，看一下下面這張圖，是w3c對這個格式給出的詮釋：

通過上圖可以看出，我們記住rect(top，right，bottom，left)的使用就行了。下在說一下clip：react（t，r，b，l）的使用

1、top，bottom指定的偏移量是從元素盒子頂部邊緣算起

2、left，right指定的偏移量是從元素盒子左邊邊緣算起

用一張圖來解釋一下上面這兩句話：

如上面這張圖所示，灰色部分是這張要裁剪的原圖大小，而中間那個白色的部分是裁剪的部分，top、bottom、left、right分別是箭頭所指的方向長度。

總之，rect的使用記住上面那兩句話就行了。下面來看一下它的應用。

二、學會它的應用（環形Loading）

關於環形Loading是個什麼效果了？下面先來看一下效果：

說一下這個效果的原理：dom結構是下面這樣的：

中間的圖片直接定位就行了，主要是pie1和pie2兩個div，這兩個div的樣式如下所示：

通過屬性clip將它們分上下層級疊放在寬度一半的左側空間，pie2在pie1的上面。動畫的時候，先讓pie1轉180度，然後改變pie2的背景讓pie2從180轉到360。這樣就實現了完美的360轉圈的效果。

下面是主要動畫函數：

關於兼容性問題：所有主流瀏覽器都支持clip屬性。

最後的總結：

首先，我們要知道clip怎麼使用（其實就是rect(t，r，b，l)的使用），然後就是如何將它應用到實際項目中， 就如文中的做一個loading轉圈，這個可以應用在h5頁面載入圖片資源的時候，還可以在下面加一個展示進度百分比的數字。

以上內容純屬於小鄭子個人理解，如有不對，歡迎留言交流。別忘了點擊關注「小鄭搞碼事」，謝謝

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！