摘要：介绍直译过来就是裁剪路径，使用或形状定义一个元素的可见区域的方法。想象一下你在中勾勒路径的场景。上是这样介绍的属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。属性代替了现在已经弃用的剪切属性。
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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1098.html
