CSS的clip-path(转)

基本概念

clip-path从单词"clip path"的直译上来说，表示的就是裁剪路径。既然有裁剪，咱们就来了解这里面的几个简单的概念。

裁剪就是从某样东西剪切一块。比如说，我们在<img>元素上，根据需要，剪切一部分需要留下的区域。而在整个裁剪中，将会碰到两个相关的概念：裁剪路径(Clipping Path)和裁剪区域(Clipping Region)。

裁剪路径是我们用来裁剪元素的路径，它标记了我们需要裁剪的区域。它可以是个简单的形状（比如Web中常见的矩形），也可以是一个复杂的多边形（不规则的多边形）。

裁剪区域是裁剪路径闭合后所包含的全部区域。

基本概念

clip-path从单词"clip path"的直译上来说，表示的就是裁剪路径。既然有裁剪，咱们就来了解这里面的几个简单的概念。

裁剪区域是裁剪路径闭合后所包含的全部区域。

旧的clip

CSS Masking Module Level 1中也提供了一个clip属性。可以说clip是CSS中出现的第一种裁剪技术。其实了解过clip的同学都知道，它就是通过overflow:hidden将裁剪区域外的元素隐藏掉了。可以说它不是真正的裁剪。

clip属性到目前为止，仅支持rect()函数，就是裁剪出一个矩形（其它形状还无法实现）。

clip-path语法

W3C官方规范提供的clip-path语法：

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

其默认值是none。另外简单介绍clip-path几个属性值：

clip-source: 可以是内、外部的SVG的<clipPath>元素的URL引用
basic-shape: 使用一些基本的形状函数创建的一个形状。主要包括circle()、ellipse()、inset()和polygon()。具体的说明可以看CSS Shapes中有关于说明。另外在CSS Shapes 101一文中也有详细介绍。
geometry-box: 是可选参数。此参数和basic-shape函数一起使用时，可以为basic-shape的裁剪工作提供参考盒子。如果geometry-box由自身指定，那么它会使用指定盒子形状作为裁剪的路径，包括任何(由border-radius提供的)的角的形状。

开始使用clip-path

在开始使用clip-path绘制图形，或者说裁剪图形之前，有两点需要大家注意：

使用clip-path要从同一个方向绘制，如果顺时针绘制就一律顺时针，逆时针就一律逆时针，因为polygon是一个连续线段，若线段彼此有交集，裁剪区域就会有相减的情况发生，当然如果你特意需要这样的效果除外。
如果绘制时采用比例的方式绘制，长宽就必须要先行设定，不然有可能绘制出来的长宽和我们想像的就会有差距，使用像素绘制就不会有这样的现象。

先来看一个使用polygon()函数绘制的示例：

img {

  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

}

这段代码会将所有的图片裁剪为菱形。但是为什么图片会被裁剪为菱形而不是梯形或平行四边形之类的呢？这主要取决于函数顶点的值。下图将说明一切：

每个点的第一个坐标值决定了它在 x 轴上的位置，第二个坐标值指定了它在 y 轴的位置，所有点是顺时针绘制的。比如菱形最右边的点，它位于 y 轴下方一半处，所以它的 y 坐标是 50%。同时这个点位于 x 轴的最右侧，所以它的 x 坐标是100%。其它点的坐标同理可得。

浏览器兼容性

看到这里，大家肯定会问，浏览器兼容性如何？

IE 和 Edge 不支持这个属性。Firefox 仅部分支持 clip-path （它只支持 url() 语法）。但是 47 以上的版本，激活 Firefox 的 layout.css.clip-path-shapes.enabled选项就可以支持这个属性了。

Chrome、Safari 和 Opera 需要使用 -webkit- 前缀支持此属性。不幸的是，它们还不支持外部的 SVG 形状。更多浏览器支持性信息如下：

文章内容来自：http://www.w3cplus.com/css3/introducing-css-clip-path-property.html