摘要：介紹直譯過來就是裁剪路徑，使用或形狀定義一個元素的可見區域的方法。想象一下你在中勾勒路徑的場景。上是這樣介紹的屬性可以防止部分元素通過定義的剪切區域來顯示，僅通過顯示的特殊區域。屬性代替了現在已經棄用的剪切屬性。
clip-path介紹
clip-path 直譯過來就是裁剪路徑，使用SVG或形狀定義一個HTML元素的可見區域的方法。想象一下你在Photoshop中勾勒路徑的場景。MDN上是這樣介紹 clip-path的：
clip-path屬性可以防止部分元素通過定義的剪切區域來顯示，僅通過顯示的特殊區域。剪切區域是被URL定義的路徑代替行內或者外部svg，或者定義路線的方法例如circle().。clip-path屬性代替了現在已經棄用的剪切 clip屬性。
基本語法
| [ || ] | none
/*屬性說明*/
=
= | | |
= | fill-box | stroke-box | view-box
兼容性
clip-path目前兼容性較差，IE和Edge直接不支持。
語法詳解和示例
為了更明顯的表示裁剪區域，我給每個demo添加了同樣寬高的透明背景，其中色塊表示被裁剪后的部分，透明背景表示被裁剪的區域。
基本圖形：inset(定義矩形)
inset() : 定義一個矩形 。注意，定義矩形不是rect，而是 inset。
//語法
inset( {1,4} [ round ]? )
//說明
inset()可以傳入5個參數，分別對應top,right,bottom,left的裁剪位置,round radius（可選，圓角）
//示例
clip-path: inset(2em 3em 2em 1em round 2em);
基本圖形：circle(定義圓)
//語法
circle( [ ]? [ at ]? )
//說明
circle()可以傳人2個可選參數；
1. 圓的半徑，默認元素寬高中短的那個為直徑，支持百分比
2. 圓心位置，默認為元素中心點
//半徑公式
如果半徑使用百分比：圓的半徑 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比
//示例
clip-path: circle(30% at 150px 120px);
基本圖形：ellipse(定義橢圓)
//語法
ellipse( [ {2} ]? [ at ]? )
//說明
ellipse()可以傳人3個可選參數；
1. 橢圓的X軸半徑，默認是寬度的一半，支持百分比
2. 橢圓的Y軸半徑，默認是高度的一半，支持百分比
3. 橢圓中心位置，默認是元素的中心點
//示例
clip-path: ellipse(45% 30% at 50% 50%);
基本圖形：polygon(定義多邊形)
//語法
polygon( ? , [ ]# )
//說明
可選，表示填充規則用來確定該多邊形的內部。可能的值有nonzero和evenodd,默認值是nonzero
后面的每對參數表示多邊形的頂點坐標（X,Y），也就是連接點
//示例
clip-path: polygon(50% 0,100% 50%,0 100%);
其他屬性
除了 inset, circle等 basic-shape屬性外，clip-path還具有url, geometry-box等屬性值，具體可以參考MDN上的介紹。
完整語法
/* Keyword values */
clip-path: none;
/* values */
clip-path: url(resources.svg#c1);
/* values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
/* values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z);
/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);
/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
圖片漸變實例
實現圖片從上往下漸變
html代碼：
<div class="img">
<img src="images/1.jpg"/>
div>
CSS代碼：
*{padding:0;margin:0;}
.img{width:630px;height:630px;}
.img img{display: block;width:100%;}
.img{
overflow: hidden;
-webkit-clip-path: polygon(0 0,0 0,100% 0,100% 0);
clip-path: polygon(0 0,0 0,100% 0,100% 0);
opacity: 0;
transition: opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(.19,1,.22,1);
transition: clip-path 1.1s cubic-bezier(.19,1,.22,1),opacity 1.1s ease 167ms;
transition: clip-path 1.1s cubic-bezier(.19,1,.22,1),opacity 1.1s ease 167ms,-webkit-clip-path 1.1s cubic-bezier(.19,1,.22,1);
}
.img.current{
opacity: 1;
-webkit-clip-path: polygon(0 0,0 100%,100% 100%,100% 0);
clip-path: polygon(0 0,0 100%,100% 100%,100% 0);
}
JS代碼：
$(function(){
$(".img").addClass(current);
})
實現圖片從左往右漸變
圖片不顯示的時候：
-webkit-clip-path: polygon(0 0,0 0,0 100%,0 100%);
clip-path: polygon(0 0,0 0,0 100%,0 100%);
圖片顯示的時候：
-webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
參考地址
- 《不可思議的CSS之clip-path》
- 《MDN:clip-path》
- 截圖基于clip-path在線神器 - http://bennettfeely.com/clippy
- 圖片漸變效果參考地址：https://www.uber.design/case-studies
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1098.html
