css: clip淺析

william_li發表於2020-01-03
原文網址 : https://juejin.im/post/5dfefee951882512583880de
CSS

前言

css中裁剪和遮罩相關的屬性一般來說是比較少用到的，但是最近寫專案的時候遇到一個問題，要給一張圖片上加個白色遮罩，產生合成效果，這就不得不用到css遮罩相關的屬性，順便把裁剪相關屬性一起學習來，做個總結，接下來就進入正文

clip-path

clip是css中第一個用來裁剪的屬性，但是由於新的標準，clip特性已經從web標準中刪除，建議使用clip-path，因此我們來看clip-path是怎麼用的

語法

<clip-source>用<url>表示剪下元素的路徑
<basic-shape> 一種形狀，其大小和位置由<幾何盒>值定義。如果沒有指定幾何框，則邊框將用作參考框
<geometry-box> 如果同 一起宣告，它將為基本形狀提供相應的參考框盒。通過自定義，它將利用確定的盒子邊緣包括任何形狀邊角

接下來就一個個來看具體的屬性，先從basic-shape開始，basic-shape提供了多個函式，先來看最常用的函式：inset()

inset

inset( {1,4} [round ]? )
inset表示方形裁剪，函式提供來五個引數，前四個引數分別代表插進的長方形與相關盒模型的上右下左四個邊界的偏移量，第五個可選引數用於定義插進長方形頂點的圓弧角度

光看字面意思可能不太好理解，來個例子吧：

<div class="wrap">
    <img class="lake" src="../img/lake.jpg">
</div>
複製程式碼
.wrap {
  display: inline-block;
  line-height: 1;
  background-color: #000;
}
.lake {
  width: 200px;
}
複製程式碼

css: clip淺析

.lake {
  width: 200px;
  clip-path: inset(10px 15px 20px 25px round 10px);
}
複製程式碼

css: clip淺析
第一段程式碼沒有給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);
}
複製程式碼

css: clip淺析

.lake {
  width: 200px;
  clip-path: circle(50px at center);
}
複製程式碼

css: clip淺析
circle()的圓心位置除了指定具體的值外還可以通過center這種位置引數直接指定圓心的位置。
第三個函式：ellipse()

ellipse( [<shape-radius>{2}]? [at <position>]? )
ellipse表示橢圓裁剪，提供三個引數，第一個引數x軸方向半徑，第二個引數y軸方向半徑，第三個引數圓心的位置

來看個例子：

.lake {
  width: 200px;
  clip-path: ellipse(100px 50px at 100px 100px);
}
複製程式碼

css: clip淺析

.lake {
  width: 200px;
  clip-path: ellipse(100px 50px at top);
}
複製程式碼

css: clip淺析
和circle一樣ellipse的圓心位置也可以使用top這類的位置值
第四個函式：polygon()

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
polygon表示多邊形裁剪，第一個引數 代表了多邊形的填充規則，可選值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%)
}
複製程式碼

css: clip淺析
上面這個例子利用了多邊形裁剪的規則，將圖片裁剪成了一個五角星，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)
}
複製程式碼

css: 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屬性功能再強大也要看瀏覽器的支援的程度，瀏覽器不支援說啥都沒用.

css: clip淺析
上面是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;
}
複製程式碼

css: clip淺析
上例中利用clip-path寫了一個簡單的圖形變換的動畫，這算是一個比較簡單的應用，實際上在處理圖片展示和圖形變換上的用處會更多，可以配合其他的屬性寫出很多複雜的圖片展示效果

總結

clip-path算是一個不常用的css屬性，由於最近在寫圖片編輯的時候用到了，因此寫了這篇文章對clip-path用法做了簡單的介紹，clip-path的強大還需要大家自己去專案中使用的時候慢慢體會，希望看了這篇文章對大家能有所幫助。如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊

相關文章