聊聊clip-path

前言

圖片是一個網站必不可少的元素，而呈現出絢麗多彩的圖片效果在不少狀況下不只僅是設計師的工做，經過代碼來修飾圖片也是一個前端工程師必備的技能。由於兼容性的問題，實際項目中可能用的比較少，包括博主本身也只是用過幾回剪切，不少狀況下都交給設計師去作了。但做爲一個hacker怎麼能知足於此呢，必須深刻探究！

正文

Flilter

filter有十種特效來處理圖片，博主只放幾種特效的樣例給你們看一下：

照片反色效果：

照片褐色效果：

照片陰影效果：

十種特效源碼:

-webkit-filter:opacity(.6);//透明度
filter:opacity(.6);
-webkit-filter:blur(10px);//照片模糊
filter:blur(10px);
-webkit-filter:invert(1);
filter:invert(1);
-webkit-filter:saturate(3);//照片飽和度
filter:saturate(3);
-webkit-filter:grayscale(1);//照片灰度
filter:grayscale(1);
-webkit-filter:sepia(1);//照片褐色
filter:sepia(1);
-webkit-filter:hue-rotate(90deg);//色相旋轉
filter:hue-rotate(90deg);
-webkit-filter:brightness(.5);//亮度
filter:brightness(.5);
-webkit-filter:contrast(2);//對比度
filter:contrast(2);
-webkit-filter:drop-shadow(10px 10px 10px #ccc);//陰影
filter:drop-shadow(10px 10px 10px #ccc);

但實際上這個屬性兼容性很低：

截止博主發文日期，Filter的兼容性如上圖，咱們能夠看到IE是徹底不支持的，Edge也是部分支持。這可能也是Filter無法用在項目中的緣由之一了。感興趣的讀者能夠Copy博主代碼本地測試一下，或是參照MDN|Filter瞭解。博主不在這裏作過多的說明了。

clip&clip-path

這兩個屬性正是今天的重頭戲，博主曾在從隱藏元素談起提起過，但並沒作深刻解釋。是的，它能夠用來隱藏元素，固然也就能處理圖片了。

• clip

clip這個屬性我相信會有很大一部分人不知道，由於這個屬性使用率很是的低，由於不少狀況下咱們會直接從新切一張新圖出來代替而不會去剪裁已有的圖片，但實際上這個屬性用在CSS sprite簡直就如同神器通常，由於在不少狀況下background-position並不符合咱們的需求，好比,有時咱們但願Sprite圖片能夠延遲滾動加載，或者是能夠很輕鬆的右鍵圖片另存爲...或是其它background-position無法知足的情景。
廢話很少說，看樣例：

position:absolute;
clip:rect(50px 250px 250px 50px); /* IE6, IE7 */
clip:rect(50px,250px,250px,50px);

注意，元素定位position必須是absolute或是fixed的，兼容IE6，IE7須要將值之間的逗號去掉。另外，react（top,right,bottom,left）；四個值分別是相對於圖片左上角爲原點的座標值。Clip基本全部的瀏覽器都支持，能夠放心使用。

讓人放棄它的緣由無外乎：

• clip 只對絕對定位的元素有效對於position:relative和position:static無效

• clip 只能用於矩形，即rect()函數

• clip-path

其實clip在HTML5中已經被廢棄了(依然可用)，取而代之的是clip-path。原本clip還有一個circle(圓)，但基本沒有瀏覽器實現這個屬性值，只有rect()但是使用，可能W3C也是等不下去了吧，直接推出了一個更牛逼的屬性——clip-path,這個屬性起初是SVG裏面的而後被挪用到了CSS裏面。關於SVG博主有時間會再另外介紹，這裏按下不表。效果圖：

讀者能夠在這裏自行體驗

兼容：如今爲止IE 和 Edge 不支持這個屬性，Firefox 僅部分支持 clip-path ，
Chrome、Safari 和 Opera 須要使用 -webkit- 前綴支持此屬性。

clip-path兼容性甚至比前面說到的filter還差，因此很難真正使用起來。更多使用效果戳這裏和這裏

說一下它的四個屬性值：

• clip-source: 能夠是內、外部的SVG的clipPath元素的URL引用;

• basic-shape: 使用一些基本的形狀函數建立的一個形狀。主要包括circle()、ellipse()、inset()和polygon()。

• geometry-box: 是可選參數。此參數和basic-shape函數一塊兒使用時，能夠爲basic-shape的裁剪工做提供參考盒子。若是geometry-box由自身指定，那麼它會使用指定盒子形狀做爲裁剪的路徑，包括任何(由border-radius提供的)的角的形狀。

開始使用clip-path

在開始使用clip-path繪製圖形，或者說裁剪圖形以前，有兩點須要你們注意：

• 使用clip-path要從同一個方向繪製，若是順時針繪製就一概順時針，逆時針就一概逆時針，由於polygon是一個連續線段，若線段彼此有交集，裁剪區域就會有相減的狀況發生，固然若是你特地須要這樣的效果除外。

• 若是繪製時採用比例的方式繪製，長寬就必需要先行設定，否則有可能繪製出來的長寬和咱們想像的就會有差距，使用像素繪製就不會有這樣的現象。

咱們就拿上面途中的六邊形做爲polygon()函數示例：

-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);

效果圖:

講解：

每一個點的第一個座標值決定了它在 x 軸上的位置，第二個座標值指定了它在 y 軸的位置，全部點是順時針繪製的。其實一個 polygon（）就能知足全部的形狀須要了，有自定義的API用更加方便不是麼。

注意：inset()這個真的坑，按說一樣裁剪成方形應該是和clip的rect同樣用法，可不同！

//Clip的rect
position:absolute;
clip:rect(50px 250px 250px 50px);
//clip-path
clip-path: inset(50px 50px 50px 50px);
-webkit-clip-path: inset(50px 50px 50px 50px);

本文使用圖片是300*300的。

很明顯：

clip:rect(50px 250px 250px 50px);
=clip-path: inset(50px 50px 50px 50px);

好大的一個坑....

結束語

相信隨着時代發展，clip-path會慢慢被瀏覽器廠商接受的。本文有任何錯誤，歡迎評論留言。