CSS3 Clip-Path

一、 Clip-Path有什么作用

二、什么是Clip-Path

三、Clip-Path 语法

四、如何使用Clip-Path

五、拓展

clip-path属性值basic-shape的几个创造图形函数使用详解：

1、circle() – 圆

2、ellipse() – 椭圆

3、inset() – 内矩形（包括圆角矩形）

4、 polygon() – 多边形

一、Clip-Path有什么作用

从图形交互界面发展伊始，WEB前端作为一个能直接和用户打交道的图形界面，就必然会经历一个从简单图形化、复杂用户操作到美观吸睛、无门槛上手的过程。

Web前端的网页设计多以矩形分布，而平面媒体的设计则倾向于多元化图形。之所以会造成这种设计上的差异是因为缺少合适的工具。这也就造成了设计师的创意发挥，前端也难以完全复刻。

不过值得庆幸的是，CSS的clip-path出现，它可以帮助我们绘制很多特殊的图形（不规则的图形）

浏览器兼容性：

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

Chrome、Safari 和 Opera 需要使用 -webkit- 前缀支持此属性。不幸的是，它们还不支持外部的 SVG 形状。

二、什么是Clip-Path

clip-path从单词"clip path"的直译过来就是：裁剪路径。

clip-path 简单的工作原理是提供一系列的X和Y值来创建路径。当使用这些值创建一条完整路径时，就会把图像按照路径内部的尺寸进行裁剪。

利用clip-path，我们可以创建圆形、椭圆和多边形等不同的形状，创造力是唯一的限制。

裁剪：就是从某样东西剪切一块。比如说，我们在<img>元素上，根据需要，剪切一部分需要留下的区域。

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

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

这样一来，元素分为两部分，裁剪区域和裁剪区域外。浏览器会裁剪掉裁剪区域以外的区域，不仅是背景及其它类似的内容，也包括border、text-shadow 等。更赞的是，浏览器不会捕获元素裁剪区域以外的 hover、click 等事件。

亲，如果您是第一次接触过clip属性，这边建议您看一下这篇文章，对clip有个简单的了解，帮助您更好的学习Clip-path属性呢{ 戏精一下:）}

三、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()。（文末有详解）

geometry-box: 是可选参数。此参数和basic-shape函数一起使用时，可以为basic-shape的裁剪工作提供参考盒子。如果geometry-box由自身指定，那么它会使用指定盒子形状作为裁剪的路径，包括任何(由border-radius提供的)的角的形状。

四、如何使用Clip-Path

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

使用clip-path要从同一个方向绘制，如果顺时针绘制就一律顺时针，逆时针就一律逆时针，因为polygon是一个连续线段，若线段彼此有交集，裁剪区域就会有相减的情况发生(特意需求此效果除外)。

如果绘制时采用比例的方式绘制，长宽就必须要先行设定，不然有可能绘制出来的长宽和我们想像的就会有差距，使用像素绘制就不会有这样的现象。

1、使用polygon()剪切元素

polygon()函数：用于定义一个多边形，也可以用来剪裁图形。它的参数是一组坐标对（<shape-arg> <shape-arg>），每一个坐标对代表多边形的一个顶点坐标。浏览器会将最后一个顶点和第一个顶点连接得到一个封闭的多边形。坐标对使用逗号来进行分隔，可以使用绝对单位或百分比单位值。

补充：除了坐标对参数，polygon()函数还可以使用一个可选的关键字fill-rule。该关键字指定如何处理可能相交的多边形形状的区域。可取值有nonzero 和evenodd。默认值为nonzero。

下面都是有效的polygon()函数声明：

polygon(0 0, 100% 100%, 0 100%);polygon(0 0, 100% 100%, 0 100%);polygon(50px 0px, 100px 100px, 0px 100px);polygon(evenodd, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px, ...);

来个实例：

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

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

来个实例：

完整代码：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Clip path</title><style type="text/css">body {margin: 20px auto;text-align: center;font-family: 'Lato';max-width: 640px;}h1 {margin-bottom: 100px;font-size: 1.8em;}div {display: inline-block;margin: 50px 0px;width: 250px;height: 250px;border-radius: 200px;filter: grayscale(0.9);cursor: pointer;}div:hover {filter: none;}div:hover .text {opacity: 1;}.text {position: absolute;background: rgba(200, 0, 0, 0.5);padding: 20px 0;top: 90px;width: 250px;opacity: 0;text-align: center;color: white;font-size: 1.4em;}.left .text {background: rgba(0, 0, 200, .5);}.right .text {background: rgba(200, 100, 0, 0.5);}.bottom .text {background: rgba(0, 200, 0, 0.5);}.top {background:url(u=266890504,2628142078&fm=26&gp=0.jpg);  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);            position: relative;left: -125px;top: -130px;}.left {background:url(u=1256414992,1036042548&fm=26&gp=0.jpg);-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);position: relative;}.right {background:url(%E4%B8%8B%E8%BD%BD.jpg);-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);position: relative;top: -352px;left: 264px;}.bottom {background:url(12.jpg);-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);position: relative;top: -220px;left: -126px;}</style></head><body><h1>Images clipped with <code>clip-path</code> Property</h1><div class="left"><p class="text">SPORTS</p></div><div class="top"><p class="text">TECHNOLOGY</p></div><div class="right"><p class="text">FOOD</p></div><div class="bottom"><p class="text">NATURE</p></div></body></html>

效果图：

2、利用 geometry-box 裁剪元素

在使用geometry-box来裁剪元素之前，对geometry-box做一下相关的了解。

geometry-box可以是shape-box、fill、stroke或者view-box。其中shape-box应用于HTML元素，它具有四种值：margin-box、border-box、padding-box和content-box。

来看个简单的示例：

.clip-me {clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;margin: 10%;}

在上例中，元素的 margin-box 会作为参考，来决定裁剪点的实际位置。点（10%，10%）是 margin-box 的左上角，所以clip-path 的定位会根据此点进行计算。

其实shape-box和CSS Shapes中的引用框概念非常类似。

如果geometry-box和basic-shape一起使用，可以引用basic-shape提供的引用框。其作用和shape-outside属性类似。

如果geometry-box由自身指定，那么它会使用指定盒子形状作为裁剪的路径，包括任何(由border-radius提供的)的角的形状。

除了shape-box值，还可以运用SVG元素上，它具有另外三个值：fill、stroke和view-box。

五、拓展

clip-path属性值basic-shape的几个创造图形函数使用详解：

1、circle() – 圆

语法如下：

circle( [<shape-radius>]? [at <position>]? )

其中问号?是正则表达式中的特殊字符，表示0和1，也就是说shape-radius（圆半径）和position（圆心位置）都是可以缺省的，表示。因此，下面的写法都是合法的：

shape-outside: circle();shape-outside: circle(50%);shape-outside: circle(at 50% 50%);shape-outside: circle(50% at 50% 50%);shape-outside: circle(50px at 50px 50px);

circle();

/* 使用默认值：圆形使用closest-side作为半径，圆形位于元素的中心 */

circle(100px at 30% 50%);

/* 圆形的半径为100像素，位于元素的水平30%，垂直50%的位置 */

circle(farthest-side at 25% 25%);

/* 圆形的半径为最远边的一半，位于元素的水平25%，垂直25%的地方 */

circle(10em at 500px 300px);

2、ellipse() – 椭圆

语法如下：

ellipse( [<shape-radius>{2}]? [at <position>]? )

x轴半径，y轴半径，以及椭圆的圆心位置。以下都是合法的：

shape-outside: ellipse();shape-outside: ellipse(50px 75px);shape-outside: ellipse(at 50% 50%);shape-outside: ellipse(50px 75px at 50% 50%);

x，y半径除了具体数值，还支持farthest-side和closest-side这两个关键字，顾名思义，分别表示到最长边的长度和最短边的长度。

例如：

ellipse(farthest-side closest-side at 25% 25%)

表示在浮动元素25% 25%位置，以距离浮动元素最长边的距离作为椭圆的x坐标，以距离浮动元素边缘最短的距离作为椭圆的y坐标。

于是，有如下的效果图（浮动元素尺寸100*100，红色点标记是25% 25%位置，可以看出椭圆的轮廓）：

ellipse();

/* 使用默认值 */

ellipse(100px 50px at 30% 50%);

/* 椭圆形的X轴半径100像素，Y轴半径50像素。圆心位于水平30%，垂直50%的地方 */

ellipse(farthest-side closest-side at 25% 25%);

/* 椭圆形的X轴半径为farthest-side，Y轴半径为closest-side。圆心位于水平25%，垂直25%的地方 */

ellipse(10em 10em at 500px 300px);

/* 椭圆形的X轴半径和Y轴半径都为10em。圆心位于水平500像素，垂直300像素的地方 */

3、inset() – 内矩形（包括圆角矩形）

语法如下：

inset( <shape-arg>{1,4} [round <border-radius>]? )

其中shape-arg是必须参数，可以是1~4个值。当提供所有前四个参数时，它们表示从参考框向内的顶部，右侧，底部和左侧偏移，也就是定义了插入的矩形的边缘位置。这些参数遵循边距缩写的语法（类似margin、padding等属性），我们可以使用1个，2个，3个或4个值。border-radius表示圆角大小，可以缺省。除了4个偏移值，如果要指定圆角，必须带上round关键字。

因此，下面这些写法都是合法的：

shape-outside: inset(10px);shape-outside: inset(10px 20px);shape-outside: inset(10px 20px 30px);shape-outside: inset(10px 20px 30px 40px);shape-outside: inset(10px 20px 30px 40px round 10px);

下面都是有效的inset()函数声明。

inset(10% 20% round 5px);

/*一个带5像素圆角的矩形，上下2条边向内10%，左右2条边向内20%*/

inset(15px 20px 30px);

inset(25% round 10px 30px);

inset(10px 20px 30px 40px round 10px);

polygon() – 多边形

*请看上文，已解释*

本文属于半参考半原创型文章

点击查看参考文章

CSS3 Clip-Path相关推荐

用css3实现ps蒙版效果+动画
说实话,css3越来越强大,使用css也可以做越来越多意想不到的效果. 今天,见到有人用css3实现了ps的蒙版效果,如下所示: 实现原理这个动画,其实也并不复杂.它使用background-cli ...
别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)
别具一格,原创唯美浪漫情人节表白专辑, (复制就可用)(html5,css3,svg)表白爱心代码(1) 一. 前言回眸之间,丰盈了岁月,涟漪了思绪,轻轻落笔,不写伤痕,不写仇怨,只写岁月经历领悟后 ...
将CSS CLIP属性应用在：扩展覆盖效果
日期:2013-3-18 来源:GBin1.com 在线演示我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加 ...
css3 图片裁剪菱形,利用CSS3 clip-path裁剪各种图形。
'clip-path'是css3的一个强大属性,我们可以利用它来绘制各种各样的图形,当然不只是这些,接下来一起看看它的强大功能吧. 首先介绍的是clip-path里面的polygon功能,我们可以通过 ...
c语言clip函数,深入理解裁剪(clip)
裁剪 canvas中有一个功能是裁剪,通过裁剪功能,可以实现裁剪区域.裁剪区域是canvas中由路径(可以称之为裁剪路径)所定义的一块区域,所有的绘图操作都限制在本区域内,区域之外的绘制效果会被忽略. ...
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载页面
前言日子总是像从指尖流过的细沙,在不经意间悄然的滑落.转眼2019年第一季度已经过去了,提前祝大家愚人节快乐,当心被人愚弄哦(就算被愚弄也不要生气啦). 先来看看今天要实现的效果原图: 玩过王者的应 ...
1897个D3 例子
1.113th U.S. Congressional Districts 2.The Story of the Season 3.20000 points in random motion ...
带你快速玩转canvas（8）非常用API的说明集
10. API简单说明解释: 1. 写这个的目的只是熟悉API的功能,因此不会去像上面那样写DEMO和一一验证: 2. 只写API和API的功能,具体请参照MDN: 3. 或许存在兼容性问题,用的时 ...
CSS的clip-path
摘要:在Web网页中主要是以矩形分布的.而平面媒体则倾向于更多不同的形状.造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容.这也就造成了很多设计师的创意发挥,就算是有创意,前端实现也将 ...

CSS3 Clip-Path

一、Clip-Path有什么作用

三、Clip-Path 语法

四、如何使用Clip-Path

1、使用polygon()剪切元素

2、利用 geometry-box 裁剪元素

五、拓展

clip-path属性值basic-shape的几个创造图形函数使用详解：

CSS3 Clip-Path相关推荐

最新文章

热门文章