CSS中的图像处理 —— clip-path
前言
Photoshop中用钢笔工具勾出轮廓，转为选取，然后反选，删去多余部分，最后只留下要选择的区域， 这一波操作想必是懂PS都非常熟悉的了，就像这样：
在CSS3中也有思思功能的属性：clip-path。顾名思义：裁剪路径， 该属性可以将方方正正的元素裁剪成几乎任何你想要的形状。
今天就跟大家一块学习这一操作。
有一个在线神器，学习之前先体验一下这个特性吧。
基本语法
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
where:
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
where:
<url> = svg引用
<inset()> = inset( <length-percentage>{1,4} [ round <border-radius> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box
where:
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
艾玛，看着是不是眼花缭乱的....下面就试着通过demo展开学一下~
提示
Demo说明：图片中的半透明是额外的元素，用来做参考的，实际的剪切效果中不会出现。
clip-source
适应于SVG，即定义了clipPath的SVG元素
clip-path: url(#c1); /*可以使本页的内联SVG*/
clip-path: url(resources.svg#c1); /*还可以是远程的SVG*/
2
SVG形状灵活，可以是各种不规则图形，甚至可以是文字，像这样：
甚至这样：
可跳到demo页查看。
SVG不太了解以后再好好学吧，熟悉SVG同学可以多试试其他的形状。
basic-shape
inset()
tip
inset() : 定义一个矩形 。注意，定义矩形不是rect，而是 inset。
inset( <length-percentage>{1,4} [ round <border-radius> ]? )
inset()可以传入5个参数，分别对应top，right，bottom，left的裁剪位置，round radius（可选，圆角），参数之间用空格隔开。
circle()
定义圆形
circle( [ <shape-radius> ]? [ at <position> ]? )
circle()可以传人2个可选参数；
圆的半径，默认值min(元素宽,元素高)/ 2，支持百分比
圆心位置，默认为元素中心点
半径公式：如果半径使用百分比：圆的半径 = (sqrt(width^2 + height^2) / sqrt(2)) * 百分比
ellipse()
定义椭圆
ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
ellipse()可以传人3个可选参数；
椭圆的X轴半径，默认是宽度的一半，支持百分比
椭圆的Y轴半径，默认是高度的一半，支持百分比
椭圆中心位置，默认是元素的中心点
polygon()
定义多边形
polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
fill-rule可选，表示填充规则，用来确定该多边形的内部。可能的值有nonzero和evenodd，默认值是nonzero。 有点拓扑学的意思，详见这里。 (这个属性现在的浏览器还没支持)
后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点
geometry-box
可选参数。此参数和basic-shape函数一起使用时，可以为basic-shape的裁剪工作提供参考盒子，其值可以使shape-box、fill、stroke或者view-box。
其中shape-box应用于HTML元素，它具有四种值：margin-box、border-box、padding-box和content-box；fill、stroke或者view-box应用于SVG。 详见这里
好吧。。。浏览器暂未支持😂。
Demo
照着老虎画了个猫😼——
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
注意
根据Masking规范，鼠标事件在图形的clipped-out区域外是无效的。
因此demo中未剪切到的部分是不响应点击的。