1 解釋
clip-path 屬性使用裁剪方式創(chuàng)建元素的可顯示區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。瀏覽器會裁剪掉裁剪區(qū)域以外的內(nèi)容，包括: 背景，內(nèi)容，邊框，陰影等，另外也不會捕獲裁剪區(qū)域之外的hover click等事件。
2 語法
-
basic-shape： 基本圖形，包括inset()、circle()、ellipse()、polygon() -
clip-source： 通過url()方法引用一段SVG的<clipPath>來作為剪裁路徑 -
geometry-box：單獨使用時，將指定框的邊緣作為剪裁路徑，或者配合basic-shape使用，用于定義剪裁的參考框（Reference Box） -
none: 不創(chuàng)建剪切路徑。
2.1 basic-shape
一種形狀，其大小和位置由 <geometry-box> 的值定義。如果沒有指定 <geometry-box>，則將使用 border-box 用為參考框。取值可為以下值中的任意一個：
-
inset()定義一個 inset 矩形。
參數(shù)類型：
inset( <shape-arg>{1,4} [round <border-radius>]? )
其中 shape-arg 分別為矩形的上右下左頂點到被剪裁元素邊緣的距離（和margin、padding參數(shù)類似），border-radius 為可選參數(shù)，用于定義 border 的圓角。
Demo:
<html>
<head>
<style>
.inset {
clip-path: inset(0);
}
.inset:hover {
clip-path: inset(10px 20px 10% 20% round 20px);
}
</style>
</head>
<body>
<div>
<img class="inset" src="./moon.png" />
</div>
</body>
</html>
原圖：
hover：
-
circle()定義一個圓形（使用一個半徑和一個圓心位置）。
參數(shù)類型：
circle( [<shape-radius>]? [at <position>]? )
其中 shape-radius 為圓形的半徑，position 為圓心的位置，width、height分別為被剪裁元素的寬高。
Demo:
<html>
<head>
<style>
.circle {
clip-path: circle(120px at center);
}
.circle:hover {
clip-path: circle(50px at center);
}
</style>
</head>
<body>
<div>
<img class="circle" src="./moon.png" />
</div>
</body>
</html>
原圖：
hover：
-
ellipse()定義一個橢圓（使用兩個半徑和一個圓心位置）。
參數(shù)類型：
ellipse( [<shape-radius>{2}]? [at <position>]? )
其中 shape-radius 為橢圓x、y軸的半徑，position 為橢圓中心的位置。
Demo:
<html>
<head>
<style>
.ellipse {
clip-path: ellipse(120px 100px at 50% 50%);
}
.ellipse:hover {
clip-path: ellipse(100px 50px at 50% 50%);
}
</style>
</head>
<body>
<div>
<img class="ellipse" src="./moon.png" />
</div>
</body>
</html>
原圖：
hover:
-
polygon()定義一個多邊形（使用一個 SVG 填充規(guī)則和一組頂點）。
參數(shù)類型：
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
其中 fill-rule 為填充規(guī)則，即通過一系列點去定義多邊形的邊界。
Demo:
<html>
<head>
<style>
.polygon {
clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
}
.polygon:hover {
transform: rotate(145deg);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
</style>
</head>
<body>
<div>
<img class="polygon" src="./moon.png" />
</div>
</body>
</html>
原圖：
hover:
-
path()定義一個任意形狀（使用一個可選的 SVG 填充規(guī)則和一個 SVG 路徑定義）。
Demo:
<html>
<head>
<style>
.path {
clip-path: path(
"M 20 240 L 20 80 L 160 80 L 160 20 L 280 100 L 160 180 L 160 120 L 60 120 L 60 240 Z"
);
}
.path:hover {
transform: rotate(145deg);
}
</style>
</head>
<body>
<div>
<img class="path" src="./moon.png" />
</div>
</body>
</html>
原圖：
hover:
2.2 clip-source
即通過引用一個svg的clipPath 元素來作為剪裁路徑。
Demo:
<html>
<head>
<style>
.path {
clip-path: url("#svgCircle");
}
</style>
</head>
<body>
<div>
<svg>
<defs>
<clipPath id="svgCircle">
<circle cx="100" cy="100" r="50" />
</clipPath>
</defs>
</svg>
<img class="path" src="./moon.png" />
</div>
</body>
</html>
2.3 geometry-box
如果同 <basic-shape> 一起聲明，它將為基本形狀提供相應的參考框盒。通過自定義，它將利用確定的盒子邊緣包括任何形狀邊角（比如說，被border-radius定義的剪切路徑）。幾何框盒可以有以下的值中的一個：
-
margin-box使用margin box作為引用框。 -
border-box使用 border box作為引用框。 -
padding-box使用 padding box作為引用框。 -
content-box使用 content box作為引用框。 -
fill-box利用對象邊界框（object bounding box）作為引用框。 -
stroke-box]使用筆觸邊界框（stroke bounding box）作為引用框。 -
view-box使用最近的 SVG 視口（viewport）作為引用框。如果viewBox屬性被指定來為元素創(chuàng)建 SVG 視口，引用框?qū)欢ㄎ辉谧鴺讼档脑c，引用框位于由viewBox屬性建立的坐標系的原點，引用框的尺寸用來設置viewBox屬性的寬高值。
clip-path: padding-box circle(50px at 0 100px);
3 場景
3.1 動態(tài)裁剪
利用clip-path和過渡實現(xiàn)動態(tài)裁減
<html>
<head>
<style>
.box {
position: relative;
width: 400px;
height: 300px;
overflow: hidden;
transition: clip-path 0.3s linear;
clip-path: circle(20px at 44px 44px);
background: blue;
color: #fff;
padding-top: 100px;
}
.box:hover {
clip-path: circle(460px at 44px 44px);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>button1</li>
<li>button2</li>
<li>button3</li>
</ul>
</div>
</body>
</html>
原圖：
hover:
3.2 反向裁剪
設置與背景一樣顏色文章來源：http://www.zghlxwxcb.cn/news/detail-820209.html
<html>
<head>
<style>
.box {
position: relative;
width: 400px;
height: 300px;
}
.mask {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: orange;
position: absolute;
}
.mask:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
clip-path: circle(100px at center);
background: blue;
}
</style>
</head>
<body style="background-color: blue">
<div class="box">
<div class="mask"></div>
</div>
</body>
</html>
文章來源地址http://www.zghlxwxcb.cn/news/detail-820209.html
到了這里，關(guān)于css clip-path的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
