前端学习笔记

CSS中的图像处理 —— clip-path

原文链接

前言

Photoshop中用钢笔工具勾出轮廓，转为选取，然后反选，删去多余部分，最后只留下要选择的区域， 这一波操作想必是懂PS都非常熟悉的了，就像这样：

不重要的图 small

在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

矮马，看着是不是眼花缭乱的....下面就试着通过demo展开学一下~

提示

Demo说明：图片中的半透明是额外的元素，用来做参考的，实际的剪切效果中不会出现。

clip-source

适应于SVG，即定义了clipPath的SVG元素

clip-path: url(#c1); /*可以使本页的内联SVG*/
clip-path: url(resources.svg#c1); /*还可以是远程的SVG*/

SVG形状灵活，可以是各种不规则图形，甚至可以是文字，像这样：

small demo

甚至这样：

small demo

可跳到demo页查看。

show in codepen
点击展开

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（可选，圆角），参数之间用空格隔开。

small demo

show in codepen
点击展开

circle()

定义圆形

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

circle()可以传人2个可选参数；

  1. 圆的半径，默认值min(元素宽,元素高)/ 2，支持百分比

  2. 圆心位置，默认为元素中心点

半径公式：如果半径使用百分比：圆的半径 = (sqrt(width^2 + height^2) / sqrt(2)) * 百分比

small demo

show in codepen
点击展开

ellipse()

定义椭圆

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

ellipse()可以传人3个可选参数；

  1. 椭圆的X轴半径，默认是宽度的一半，支持百分比

  2. 椭圆的Y轴半径，默认是高度的一半，支持百分比

  3. 椭圆中心位置，默认是元素的中心点

small demo

show in codepen
点击展开

polygon()

定义多边形

polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )

fill-rule可选，表示填充规则，用来确定该多边形的内部。可能的值有nonzero和evenodd，默认值是nonzero。 有点拓扑学的意思，详见这里。 (这个属性现在的浏览器还没支持)

后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点

small demo

show in codepen
点击展开

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中未剪切到的部分是不响应点击的。

参考资料

欢迎关注

赏不赏，看您心情

← Columns —— CSS多栏布局 →