前言
css中裁剪和遮罩相關的屬性一般來說是比較少用到的，但是最近寫項目的時候遇到一個問題，要給一張圖片上加個白色遮罩，產生合成效果，這就不得不用到css遮罩相關的屬性，順便把裁剪相關屬性一起學習來，做個總結，接下來就進入正文
clip-path
clip是css中第一個用來裁剪的屬性，但是由於新的標准，clip特性已經從web標准中刪除，建議使用clip-path，因此我們來看clip-path是怎么用的
語法
<clip-source>用<url>表示剪切元素的路徑
<basic-shape> 一種形狀，其大小和位置由<幾何盒>值定義。如果沒有指定幾何框，則邊框將用作參考框
<geometry-box> 如果同 <basic-shape> 一起聲明，它將為基本形狀提供相應的參考框盒。通過自定義，它將利用確定的盒子邊緣包括任何形狀邊角
接下來就一個個來看具體的屬性，先從basic-shape開始，basic-shape提供了多個函數，先來看最常用的函數：inset()
inset
inset( <shape-arg>{1,4} [round <border-radius>]? )
inset表示方形裁剪，函數提供來五個參數，前四個參數分別代表插進的長方形與相關盒模型的上右下左四個邊界的偏移量，第五個可選參數<border-radius>用於定義插進長方形頂點的圓弧角度
光看字面意思可能不太好理解，來個例子吧：
<div class="wrap"> <img class="lake" src="../img/lake.jpg"> </div>.wrap { display: inline-block; line-height: 1; background-color: #000; } .lake { width: 200px; }
.lake { width: 200px; clip-path: inset(10px 15px 20px 25px round 10px); }
第一段代碼沒有給clip-path時，得到圖片周圍沒有黑邊，當加上clip-path時，圖片周圍產生了黑邊，黑邊的部分就是圖片被裁掉的不部分，inset(10px 15px 20px 25px round 10px)，上邊界10px，右邊界15px，下邊界20px，左邊界25px，裁剪角弧度10px,通過這個例子應該就能看出參數作用。
接下看第二個函數circle()：
circle( [<shape-radius>]? [at <position>]?
circle表示圓形裁剪，函數提供兩個可選參數，第一個圓形的半徑，第二個圓心的位置
來看個例子:
.lake { width: 200px; clip-path: circle(50px at 80px 80px); }
.lake { width: 200px; clip-path: circle(50px at center); }
circle()的圓心位置除了指定具體的值外還可以通過center這種位置參數直接指定圓心的位置。
第三個函數：ellipse()
ellipse( [<shape-radius>{2}]? [at <position>]? )
ellipse表示橢圓裁剪，提供三個參數，第一個參數x軸方向半徑，第二個參數y軸方向半徑，第三個參數圓心的位置
來看個例子：
.lake { width: 200px; clip-path: ellipse(100px 50px at 100px 100px); }
.lake { width: 200px; clip-path: ellipse(100px 50px at top); }
和circle一樣ellipse的圓心位置也可以使用top這類的位置值
第四個函數：polygon()
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
polygon表示多邊形裁剪，第一個參數<fill-rule> 代表了多邊形的填充規則，可選值nonzero 和 evenodd，第二個參數是多邊形頂點坐標的合集
來看個例子：
.lake { width: 200px; height: 200px; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) }
上面這個例子利用了多邊形裁剪的規則，將圖片裁剪成了一個五角星，fill-rule兩個關鍵字都試了一下，裁剪效果相同，這里有一個網址，上面clip-path basic-shape的所有用法演示，感興趣的可以上去看看
第五個函數：path()，這個函數嘗試了一下，在Chrome和Firefox兩個瀏覽器上都不生效
url()
這里的clip-path url()函數里的參數並不是裁剪的用鏈接地址，而是一個剪切元素用的svg路徑，舉個例子：
<div class="wrap"> <img class="lake" src="../img/lake.jpg"> <svg width="0" height="0"> <defs> <clipPath id="clip"> <path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"> </path> </clipPath> </defs> </svg> </div>.lake { width: 200px; clip-path: url(#clip) }
上例子中利用svg的路徑裁剪，將圖片裁剪成了一個心形
裁剪參考框
裁剪參考框指的是裁剪元素的參考框盒，取值margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|，一般和basic-shape一起使用，舉個例子：
.lake { width: 200px; clip-path:margin-box inset(10px 15px 20px 25px round 10px); background-color: #000; }這里的幾個取值就不做詳細介紹，和css盒模型類似，還有一個原因這個值在Chrome上不支持，但是Firefox上是可以使用的
瀏覽器支持
css屬性功能再強大也要看瀏覽器的支持的程度，瀏覽器不支持說啥都沒用.
上面是caniuse上查到的瀏覽器支持程度，可以看到出來一些低版本的瀏覽器不支持外，大多數高版本的瀏覽器都是支持的，可以放心使用
資源搜索網站大全https://55wd.com 廣州品牌設計公司http://www.maiqicn.com
clip-path動畫
基本語法和瀏覽器支持都介紹完了，接下來來看看clip-path的簡單應用：clip-path動畫，來看一個簡單demo：
@keyframes shape { from { clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); } to { clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%); } } .lake { width: 200px; clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); animation: 2s shape infinite alternate ease-in-out; }
上例中利用clip-path寫了一個簡單的圖形變換的動畫，這算是一個比較簡單的應用，實際上在處理圖片展示和圖形變換上的用處會更多，可以配合其他的屬性寫出很多復雜的圖片展示效果
總結
clip-path算是一個不常用的css屬性，由於最近在寫圖片編輯的時候用到了，因此寫了這篇文章對clip-path用法做了簡單的介紹，clip-path的強大還需要大家自己去項目中使用的時候慢慢體會，希望看了這篇文章對大家能有所幫助。