聊聊clip-path

zqhxuyuan 发布于2019-08-29 11:16 / 1552人阅读

摘要：这两个属性正是今天的重头戏，博主曾在从隐藏元素谈起提起过，但并没做深入解释。另外，四个值分别是相对于图片左上角为原点的坐标值。基本所有的浏览器都支持，可以放心使用。

前言

图片是一个网站必不可少的元素，而呈现出绚丽多彩的图片效果在很多情况下不仅仅是设计师的工作，通过代码来修饰图片也是一个前端工程师必备的技能。因为兼容性的问题，实际项目中可能用的比较少，包括博主自己也只是用过几次剪切，很多情况下都交给设计师去做了。但作为一个hacker怎么能满足于此呢，必须深入探究！

正文 Flilter

filter有十种特效来处理图片，博主只放几种特效的样例给大家看一下：

照片反色效果：

照片褐色效果：

照片阴影效果：

十种特效源码:

-webkit-filter:opacity(.6);//透明度
filter:opacity(.6);
-webkit-filter:blur(10px);//照片模糊
filter:blur(10px);
-webkit-filter:invert(1);
filter:invert(1);
-webkit-filter:saturate(3);//照片饱和度
filter:saturate(3);
-webkit-filter:grayscale(1);//照片灰度
filter:grayscale(1);
-webkit-filter:sepia(1);//照片褐色
filter:sepia(1);
-webkit-filter:hue-rotate(90deg);//色相旋转
filter:hue-rotate(90deg);
-webkit-filter:brightness(.5);//亮度
filter:brightness(.5);
-webkit-filter:contrast(2);//对比度
filter:contrast(2);
-webkit-filter:drop-shadow(10px 10px 10px #ccc);//阴影
filter:drop-shadow(10px 10px 10px #ccc);

但实际上这个属性兼容性很低：

截止博主发文日期，Filter的兼容性如上图，我们可以看到IE是完全不支持的，Edge也是部分支持。这可能也是Filter没法用在项目中的原因之一了。感兴趣的读者可以Copy博主代码本地测试一下，或是参照MDN|Filter了解。博主不在这里做过多的说明了。

clip&clip-path

这两个属性正是今天的重头戏，博主曾在从隐藏元素谈起提起过，但并没做深入解释。是的，它可以用来隐藏元素，当然也就能处理图片了。

clip

clip这个属性我相信会有很大一部分人不知道，因为这个属性使用率非常的低，因为很多情况下我们会直接重新切一张新图出来代替而不会去剪裁已有的图片，但实际上这个属性用在CSS sprite简直就如同神器一般，因为在很多情况下background-position并不符合我们的需求，比如,有时我们希望Sprite图片可以延迟滚动加载，或者是可以很轻松的右键图片另存为...或是其它background-position没法满足的情景。
废话不多说，看样例：

position:absolute;
clip:rect(50px 250px 250px 50px); /* IE6, IE7 */
clip:rect(50px,250px,250px,50px);

注意，元素定位position必须是absolute或是fixed的，兼容IE6，IE7需要将值之间的逗号去掉。另外，react（top,right,bottom,left）；四个值分别是相对于图片左上角为原点的坐标值。Clip基本所有的浏览器都支持，可以放心使用。

让人放弃它的原因无外乎：

clip 只对绝对定位的元素有效对于position:relative和position:static无效

clip 只能用于矩形，即rect()函数

clip-path

其实clip在HTML5中已经被废弃了(依然可用)，取而代之的是clip-path。本来clip还有一个circle(圆)，但基本没有浏览器实现这个属性值，只有rect()可是使用，可能W3C也是等不下去了吧，直接推出了一个更牛逼的属性——clip-path,这个属性起初是SVG里面的然后被挪用到了CSS里面。关于SVG博主有时间会再另外介绍，这里按下不表。效果图：

读者可以在这里自行体验

兼容：现在为止IE 和 Edge 不支持这个属性，Firefox 仅部分支持 clip-path ，
Chrome、Safari 和 Opera 需要使用 -webkit- 前缀支持此属性。

clip-path兼容性甚至比前面说到的filter还差，所以很难真正使用起来。更多使用效果戳这里和这里

说一下它的四个属性值：

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是一个连续线段，若线段彼此有交集，裁剪区域就会有相减的情况发生，当然如果你特意需要这样的效果除外。

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

我们就拿上面途中的六边形作为polygon()函数示例：

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

效果图:

讲解：

每个点的第一个坐标值决定了它在 x 轴上的位置，第二个坐标值指定了它在 y 轴的位置，所有点是顺时针绘制的。其实一个 polygon（）就能满足所有的形状需要了，有自定义的API用更加方便不是么。

注意：inset()这个真的坑，按说同样裁剪成方形应该是和clip的rect一样用法，可不一样！

//Clip的rect
position:absolute;
clip:rect(50px 250px 250px 50px);
//clip-path
clip-path: inset(50px 50px 50px 50px);
-webkit-clip-path: inset(50px 50px 50px 50px);

本文使用图片是300*300的。

很明显：

clip:rect(50px 250px 250px 50px);
=clip-path: inset(50px 50px 50px 50px);

好大的一个坑....

结束语

相信随着时代发展，clip-path会慢慢被浏览器厂商接受的。
本文有任何错误，欢迎评论留言。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111538.html

SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0
使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变

摘要：介绍直译过来就是裁剪路径，使用或形状定义一个元素的可见区域的方法。想象一下你在中勾勒路径的场景。上是这样介绍的属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。属性代替了现在已经弃用的剪切属性。clip-path介绍 clip-path 直译过来就是裁剪路径，使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样...

番茄西红柿 2019-04-23 11:44 评论0 收藏0
不可思议的CSS之clip-path

摘要：一个用来生成各种形状包括随意拖拉自定义并且可以直接生成代码的网站。兼容性目前兼容性较差，和直接不支持，考虑兼容性的同学可以暂时等等。透明区域表示被裁剪的区域基本图形定义一个矩形。语法说明可选，表示填充规则用来确定该多边形的内部。本文首发于我的博客曾经和某位朋友在聊天中讨论过这样一个话题：综合90%的网站的布局以及页面中的元素不是方的，就是圆的。就像所有的颜色都是由三原色（RGB）...

walterrwu 2019-08-29 13:17 评论0 收藏0
CSS中clip-path属性的使用

摘要：的使用值为多个坐标点组成，坐标第一个值是方向，第二个值是方向。值为椭圆的轴半径，轴半径，定位椭圆的坐标三部分组成。 clip-path的使用 polygon 值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。左上角为原点，右下角是(100%,100%)的点。 body { background-color: #000; } .fa { border: 1px ...

KnewOne 2019-08-29 16:58 评论0 收藏0
CSS中clip-path属性的使用

摘要：的使用值为多个坐标点组成，坐标第一个值是方向，第二个值是方向。值为椭圆的轴半径，轴半径，定位椭圆的坐标三部分组成。 clip-path的使用 polygon 值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。左上角为原点，右下角是(100%,100%)的点。 body { background-color: #000; } .fa { border: 1px ...

levius 2019-08-02 11:42 评论0 收藏0