基本概念
    clip-path从单词"clip path"的直译上来说，表示的就是裁剪路径。既然有裁剪，咱们就来了解这里面的几个简单的概念。
裁剪就是从某样东西剪切一块。比如说，我们在<img>元素上，根据需要，剪切一部分需要留下的区域。而在整个裁剪中，将会碰到两个相关的概念：裁剪路径(Clipping Path)和裁剪区域(Clipping Region)。
裁剪路径：是我们用来裁剪元素的路径，它标记了我们需要裁剪的区域。它可以是个简单的形状（比如Web中常见的矩形），也可以是一个复杂的多边形（不规则的多边形）。
裁剪区域：是裁剪路径闭合后所包含的全部区域。


     这样一来，元素分为两部分，裁剪区域和裁剪区域外。浏览器会裁剪掉裁剪区域以外的区域，不仅是背景及其它类似的内容，也包括 border、text-shadow 等。更赞的是，浏览器不会捕获元素裁剪区域以外的 hover、click 等事件。
     clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

基本用法：
    clip-path: circle(40%);
    clip-path: ellipse(130px 140px at 10% 20%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

初始值	none
适用元素	all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
是否是继承属性	否
Percentages	refer to reference box when specified, otherwise border-box
适用媒体	visual
计算值	as specified, but with url values made absolute
Animation type	yes, as specified for basic-shape, otherwise no
正规顺序	the unique non-ambiguous order defined by the formal grammar

值：<clip-source>
用<url>表示剪切元素的路径
inset(), circle(), ellipse(), polygon()
一个 <basic-shape> 方法. 这种形状将会利用指定的<geometry-box>来定位和固定基本形状。如果没有geometry box（几何盒模型）特别指出的话，border-box将会是默认的盒模型。
<geometry-box>
如果同<basic-shape>一起声明，它将为基本形状提供相应的参考盒子。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被border-radius定义的剪切路径）。几何体盒子将会有以下的值：
fill-box
利用对象边界框作为引用框。
stroke-box
使用笔触边界框作为引用框
view-box
使用最近的SVG视口作为引用框。如果viewBox 属性被指定来为元素创建SVG视口，引用框将会被定位在坐标系的原点，引用框位于由view-box属性建立的坐标系的原点，引用框的尺寸用来设置viewbox属性的宽高值。
margin-box
使用 margin box 作为引用框
border-box
使用 border box 作为引用框.
padding-box
使用 padding box 作为引用框.
content-box
使用 content box 作为引用框

例子：

/* inline SVG  */
.target {
  clip-path: url(#c1);
}

/* external SVG */
.anothertarget {
  clip-path: url(resources.svg#c1);
}

/* circle */
.circleClass {
  clip-path: circle(15px at 20px 20px);
}

点击查看更多精彩前端资源

点击有惊喜

基本概念
    clip-path从单词"clip path"的直译上来说，表示的就是裁剪路径。既然有裁剪，咱们就来了解这里面的几个简单的概念。
裁剪就是从某样东西剪切一块。比如说，我们在<img>元素上，根据需要，剪切一部分需要留下的区域。而在整个裁剪中，将会碰到两个相关的概念：裁剪路径(Clipping Path)和裁剪区域(Clipping Region)。
裁剪路径：是我们用来裁剪元素的路径，它标记了我们需要裁剪的区域。它可以是个简单的形状（比如Web中常见的矩形），也可以是一个复杂的多边形（不规则的多边形）。
裁剪区域：是裁剪路径闭合后所包含的全部区域。


     这样一来，元素分为两部分，裁剪区域和裁剪区域外。浏览器会裁剪掉裁剪区域以外的区域，不仅是背景及其它类似的内容，也包括 border、text-shadow 等。更赞的是，浏览器不会捕获元素裁剪区域以外的 hover、click 等事件。
     clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

基本用法：
    clip-path: circle(40%);
    clip-path: ellipse(130px 140px at 10% 20%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

初始值	none
适用元素	all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
是否是继承属性	否
Percentages	refer to reference box when specified, otherwise border-box
适用媒体	visual
计算值	as specified, but with url values made absolute
Animation type	yes, as specified for basic-shape, otherwise no
正规顺序	the unique non-ambiguous order defined by the formal grammar

值：<clip-source>
用<url>表示剪切元素的路径
inset(), circle(), ellipse(), polygon()
一个 <basic-shape> 方法. 这种形状将会利用指定的<geometry-box>来定位和固定基本形状。如果没有geometry box（几何盒模型）特别指出的话，border-box将会是默认的盒模型。
<geometry-box>
如果同<basic-shape>一起声明，它将为基本形状提供相应的参考盒子。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被border-radius定义的剪切路径）。几何体盒子将会有以下的值：
fill-box
利用对象边界框作为引用框。
stroke-box
使用笔触边界框作为引用框
view-box
使用最近的SVG视口作为引用框。如果viewBox 属性被指定来为元素创建SVG视口，引用框将会被定位在坐标系的原点，引用框位于由view-box属性建立的坐标系的原点，引用框的尺寸用来设置viewbox属性的宽高值。
margin-box
使用 margin box 作为引用框
border-box
使用 border box 作为引用框.
padding-box
使用 padding box 作为引用框.
content-box
使用 content box 作为引用框

例子：

/* inline SVG  */
.target {
  clip-path: url(#c1);
}

/* external SVG */
.anothertarget {
  clip-path: url(resources.svg#c1);
}

/* circle */
.circleClass {
  clip-path: circle(15px at 20px 20px);
}

点击查看更多精彩前端资源

点击有惊喜