CSS的clip-path(转)

基本概念

clip-path

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

裁剪就是从某样东西剪切一块。比如说，我们在

<img>

元素上，根据需要，剪切一部分需要留下的区域。而在整个裁剪中，将会碰到两个相关的概念：裁剪路径(Clipping Path)和裁剪区域(Clipping Region)。

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

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

基本概念

clip-path

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

裁剪就是从某样东西剪切一块。比如说，我们在

<img>

元素上，根据需要，剪切一部分需要留下的区域。而在整个裁剪中，将会碰到两个相关的概念：裁剪路径(Clipping Path)和裁剪区域(Clipping Region)。

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

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

旧的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