css: clip淺析

前言

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上查到的瀏覽器支持程度，能夠看到出來一些低版本的瀏覽器不支持外，大多數高版本的瀏覽器都是支持的，能夠放心使用

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的強大還須要你們本身去項目中使用的時候慢慢體會，但願看了這篇文章對你們能有所幫助。若是有錯誤或不嚴謹的地方，歡迎批評指正，若是喜歡，歡迎點贊