CSS clip-path

admin發表於2019-04-17

CSS

掌握此屬性首先從其名稱入手，這也是本站文章的常見風格。

clip-path由單詞clip與path構成，clip翻譯成漢語具有"剪下"的意思，path翻譯成漢語具有"路徑"的意思。

名副其實，此屬性可以沿著指定的路徑對元素或者圖形進行裁切操作。

與此屬性類似，clip屬性也可以完成裁切操作，雖然當前主流瀏覽器都支援此屬性，但已不推薦使用。

之所以clip屬性不推薦使用，主要基於如下幾點原因：

（1）.可以被裁切的元素必須採用固定定位或者絕對定位。

（2）.只能進行矩形裁切，裁切方式有限。

關於clip屬性的具體用法可以參閱CSS3 clip屬性一章節。

語法結構：

[CSS] 純文字檢視 複製程式碼
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

屬性值解析：

（1）.clip-source：規定被裁剪的內部或者外部的SVG的<clipPath>元素的URL引用。

（2）.basic-shape：常見的一些圖形函式，屬性可以將元素或者圖形切割成對應的形狀。

（3）.geometry-box：可選，為basic-shape圖形函式提供裁切參考盒子；如果省略，那麼分為兩種情況，如果是對普通的HTML元素的裁切，預設值是border-box，如果是對SVG圖形的裁切，那麼預設值是fill-box。

特別說明：裁切函式有後面幾種，circle()、ellipse()、inset()和polygon()。

通過一個簡單的圖示對裁切裁切進行一下簡單介紹：

$a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224032s8js5jl66z8djvyd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

圖示簡單說明如下：

（1）.虛線表示裁切路徑，將沿著這條路徑對圖片進行裁切。

（2）.隨著裁切的進行，路徑必然閉合，路徑中包圍的地方將是要保留的區域。

clip屬性雖然不被推薦使用，但是當前瀏覽器支援度非常不錯，應該有不少朋友想了解兩者區別。

字面與語法結構的區別不多介紹，兩者主要區別在於裁切凡是，下面通過圖示方式簡單介紹一下兩者的區別：

$a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224050ye627ub9upisiaxf.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

上面是clip的裁切方式，白色區域被保留，也就是座標重合的區域。

$a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224102surgaat22w2i2rvx.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

上面是clip-path裁切方式，白色區域被保留，很明顯與clip不同。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg{
width:400px;
height:400px;
}
circle {
clip-path:url(#clipPath);
}
</style>
</head>
<body>
<svg>
<defs>
<clipPath id="clipPath">
<rect x="15" y="15" width="100" height="100"/>
</clipPath>
</defs>
<circle
cx="150" cy="150"
r="100"
fill="red"/>
<rect 
x="15" y="15"
width="100" height="100"
fill="blue"
fill-opacity="0.1"/>
</svg>                         
</body>
</html>

程式碼執行效果截圖如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224136he19nnlc4ju9d71u.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

上面的程式碼引用當前頁面的<clipPath>規定裁切效果。

我們也可以引用非當前頁面的<clipPath>規定裁切效果，簡單程式碼片段演示如下：

[CSS] 純文字檢視 複製程式碼
circle {
  clip-path:url(ant.svg#clipPath); 
}

需要特別注意的是，<clipPath>不但可以用於SVG元素，也可以用於普通HTML元素。

前面就是一個用於普通HTML元素的例子，用於SVG元素是同樣的道理，不再演示。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:309px;
  height:99px;
  background-image:url(demo/CSS/img/mybg.png);
  clip-path:inset(0px 206px 66px 0px); 
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

上述程式碼演示了inset矩形裁切函式的用法，下面對上述程式碼進行一下分析。

程式碼使用如下背景圖片，寬度為309畫素，高度為99畫素，平均分為九分。

$a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224224swpw1788e717g1z0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

inset()函式具有四個引數，用於確定裁切路徑，順序是top、right、bottom和left。

需要特別注意的是，函式的引數不能用逗號進行分割。

$a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224237ykjkkp5kk6d88w4j.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

所以上述程式碼最終會將背景圖片中的"1"區域裁切出來。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:309px;
  height:99px;
  background-image:url(demo/CSS/img/mybg.png);
  clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

程式碼執行效果截圖如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224313fogsp3zrqmargkm3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

對上述程式碼分析如下：

（1）.polygon()函式可以建立一個多邊形裁切路徑。

（2）.每一個座標點通過逗號分隔，引數值可以是數值也可以是百分比。

（3）.用逗號分隔的每一座標，第一個是x軸座標，第二個是y軸座標。

（4）.順序是採用上右下左的方式，非常簡單，不再做過多的說明。

circle()和ellipse()函式分別進行圓形和橢圓形裁切操作，本文就不再進行程式碼例項演示。

非常簡單，感性去的朋友可以自行做一下例項測試，下面是兩個函式的語法結構：

[CSS] 純文字檢視 複製程式碼
/* 圓形 */
clip-path: circle(30px at 35px 35px);
/* 橢圓 */
clip-path: ellipse(65px 30px at 125px 40px);

簡單說明如下：

（1）.at前面的引數規定的是半徑尺寸。

（2）.橢圓具有兩個半徑，很容易理解，因為橢圓是扁狀的。

（3）.at後面規定的是圓心座標。

geometry-box屬性：

它可以為裁切函式規定裁切參考盒子，其實就是規定裁切所在的座標系。

如果是針對普通的HTML元素進行裁切，那麼可以規定如下幾個值：

（1）.margin-box

（2）.border-box

（3）.padding-box

（4）.content-box圖示如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224354dtagatkal9ythgzg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$

通過理論引數過於枯燥，也不夠直觀，下面看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:100px;
  height:50px;
  background-color:#ccc;
  border:10px solid red;
  clip-path:inset(0px 10px 10px 0px) border-box; 
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

程式碼執行效果截圖如下：

$a:3:{s:3:\"pic\";s:43:\"portal/201904/17/224419s999ppt99tv94v99.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}$