前言
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淺析](https://i.iter01.com/images/061c85f1ad09f52f2044e2628b9ba83a495b68acd2119e3ddccaf32e7e6c0881.png)
.lake {
width: 200px;
clip-path: inset(10px 15px 20px 25px round 10px);
}
複製程式碼
![css: clip淺析](https://i.iter01.com/images/dfcc67055f80aadfcc6b77c8959645a69449392e3e46dcbd425dceff0c0beded.png)
接下看第二個函式circle():
circle( [<shape-radius>]? [at <position>]?
circle表示圓形裁剪,函式提供兩個可選引數,第一個圓形的半徑,第二個圓心的位置
來看個例子:
.lake {
width: 200px;
clip-path: circle(50px at 80px 80px);
}
複製程式碼
![css: clip淺析](https://i.iter01.com/images/838b995bdda136c6170f1edfe71e13ecd5a0c6778bac5af522c0ac413fc529a3.png)
.lake {
width: 200px;
clip-path: circle(50px at center);
}
複製程式碼
![css: clip淺析](https://i.iter01.com/images/40384245fb4f958865f31c24d80d18c3f8db4970218b3c299219772a22a58079.png)
第三個函式:ellipse()
ellipse( [<shape-radius>{2}]? [at <position>]? )
ellipse表示橢圓裁剪,提供三個引數,第一個引數x軸方向半徑,第二個引數y軸方向半徑,第三個引數圓心的位置
來看個例子:
.lake {
width: 200px;
clip-path: ellipse(100px 50px at 100px 100px);
}
複製程式碼
![css: clip淺析](https://i.iter01.com/images/12955d1ec9b73360912629d2b178433f93886162f043eaf6c05b28b77ad9bfdc.png)
.lake {
width: 200px;
clip-path: ellipse(100px 50px at top);
}
複製程式碼
![css: clip淺析](https://i.iter01.com/images/e1e3ba17c13709ee7b3a2c92167c214610e31ec7669e317a9f0ffe0e15b2c755.png)
第四個函式: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淺析](https://i.iter01.com/images/9708c4f64fe786fa2d883848ed9439d929ed1fe649f9baa7b73878e5cff47057.png)
第五個函式: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淺析](https://i.iter01.com/images/750fccc537a283a609778d63d8110db65ba23844cb8e0a595bb9e435e9f44419.png)
裁剪參考框
裁剪參考框指的是裁剪元素的參考框盒,取值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淺析](https://i.iter01.com/images/228622ded6681177fbad6f7bd01918dde9ca2f0491648f900f7184e9c22cb0a4.png)
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淺析](https://i.iter01.com/images/8268c55f905ac262cc9c0c5f860acd781d5cc267533b833b6de48cd7c405033c.gif)
總結
clip-path算是一個不常用的css屬性,由於最近在寫圖片編輯的時候用到了,因此寫了這篇文章對clip-path用法做了簡單的介紹,clip-path的強大還需要大家自己去專案中使用的時候慢慢體會,希望看了這篇文章對大家能有所幫助。如果有錯誤或不嚴謹的地方,歡迎批評指正,如果喜歡,歡迎點贊