详解CSS Masking模块之Clipping(3)

如果取值四个值，表示上取第一个值，右取第二个值，下取第三个值，左取第四个值。类似于 border 的取值 round 用来设置裁剪区域是否带圆角，未显式设置表示剪切区域没有圆角，如果设置表示剪切区域带有圆角 <border-radius> 用来设置 border-radius 的半径值，其使用和CSS的 border-radius 一样，也可以带 /

用张图来表示：

来看个Demo：

circle()

circle() 用来绘制圆。

clip-path: circle(<shape-radius> at posX posY)

<shape-radius> ：圆的半径，其值可以是 <length-percentage> 、 closest-side 、 farthest-side at ：显式的设置圆心的位置，如果未显式设置，默认的圆心在元素的正中间，即 center （ 50% 50% ） posX posY ：设置圆心位置， posX 是 x 轴的位置， posY 是 y 轴的位置，取值可以类似于 background-position

ellipse()

ellipse() 用来绘制椭圆：

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

<shape-radius> ：椭圆的半径，其值可以是 <length-percentage> 、 closest-side 、 farthest-side ，如果只取一个值的时候，表示 x 轴和 y 的半径值是一样的

at ：显式的设置圆心的位置，如果未显式设置，默认的圆心在元素的正中间，即 center （ 50% 50% )

<position> ：即 posX posY ，用于设置圆心位置，如果未显式设置，其圆心在元素正中间 (center) 即 50% 50% ，其使用类似于 background-position

polygon()

polygon() 主要用来绘制不规则的多边形：

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

<fill-rule> ：填充规则，后面介绍 clip-rule 规则会细节，具体解释可以阅读 fill-rule

 <length-percentage> <length-percentage> 设置多边形点的位置

一个多边形至少会有三个点组成，比如简单的三角形，如果使用 polygon() 来绘制一个三角形的话，那么就会有三对坐标点，每对之间用一个 , 分隔，比如：

（编辑：ASP站长网）