CSS3裁剪与遮罩解析

一、用途

CSS3裁剪与遮罩（Clipping and Masking）用来隐藏元素的一部分而显示另一部分

二、区别

CSS3裁剪与遮罩（Clipping and Masking）用来隐藏元素的一部分而显示另一部分

三、裁剪

3.1属性一览

3.1.1clip

语法

clip: auto | rect(top, right, bottom, left)

含义

• 设置绝对定位元素的裁剪，为不建议使用的属性，auto值为默认值。
• 自对象左上角为(0,0) 计算的四个偏移数值。如果为auto，则此边不剪切

3.1.2clip-path

语法

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

含义

• 使用基础形状或引用clipPath元素裁剪元素, none值为默认值

属性值一览表

使用基础形状，通过clip-path进行裁剪

除了使用以上形状外，还可以使用chrome浏览器的shapes插件绘制多边形

引用svg定义的<clipPath>元素裁剪元素

3.1.3使用文本裁剪背景图像

语法

-webkit-background-clip: text；

目前只支持webkit内核浏览器，使用polyfill解决问题

四、遮罩

4.1属性一览

4.1.1mask-image

语法

mask-image: none | <image> | <mask-source>

含义

设置元素的遮罩图像, none值为默认值

4.1.2mask-mode

语法

mask-mode: alpha | luminance | auto

含义

设置遮罩的模式, auto为默认值

4.1.3mask-repeat

语法

mask-repeat: repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

含义

设置遮罩的重复模式, no-repeat为默认值

4.1.4mask-position

语法

mask-position: <position> [ , <position> ]*

<position> = [ left | center | right | top | bottom | <percentage> | <length> ]

含义

设置遮罩的位置模式, center为默认值

4.1.5mask-clip

语法

mask-clip: <geometry-box> | no-clip

<geometry-box> = <shape-box> | fill | stroke | view-box

<shape-box> = margin-box | border-box | padding-box | content-box

含义

设置遮罩的影响区域, border-box为默认值

4.1.6mask-origin

语法

mask-origin: <geometry-box>

<geometry-box> = <shape-box> | fill | stroke | view-box

<shape-box> = margin-box | border-box | padding-box | content-box

含义

设置计算mask-position时的参考原点位置, border-box为默认值

4.1.7mask-composite

语法

mask-composite:  <compositing-operator>#

<compositing-operator > = add | subtract | intersect | exclude

含义

设置当前遮罩图层与下面图层的结合方式。

分别为添加、减去、交叉、排除

等同于svg里的source-over、source-out、source-in、XOR

4.1.8mask

语法

mask: <mask-reference> <masking-mode>? || <position> [ / <bg-size> ]? ||

<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] ||

<compositing-operator>

含义

设置遮罩的复合属性。

一个< geometry-box >值将会同时设置mask-origin和mask-licp，如果有两个值则分别代表mask-origin和mask-clip。

mask-repeat、mask-postion、mask-clip、mask-origin、mask-size对<mask>element无效

4.2边框遮罩属性一览

4.2.1mask-border-source

语法

mask-border-source: none | <image>

含义

设置边框遮罩的图像，none为默认值。

类似于border-image-source

4.2.2mask-border-mode

语法

mask-border-mode: luminance | alpha

含义

设置边框遮罩的模式，alpha为默认值。

类似于mask-mode

4.2.3mask-border-slice

语法

mask-border-slice: [<number> | <percentage>]{1,4} fill?

含义

• 设置边框遮罩的切割方式，0为默认值。
• 类似于border-image-slice。
• 该属性指定从上，右，下，左方位来分隔图像，将图像分成4个角，4条边和中间区域共9份，中间区域始终是透明的（即没填充），除非加上关键字 fill

4.2.4mask-border-width

语法

mask-border-width: [ <length> | <percentage> | <number> | auto ]{1,4}

含义

设置边框遮罩的厚度，auto为默认值。类似于border-image-width

4.2.5mask-border-outset

语法

mask-border-outset: [ <length> | <number> ]{1,4}

含义

设置边框遮罩的扩展，0为默认值。类似于border-image-outset

4.2.5mask-border-repeat

语法

mask-border-repeat: [ stretch | repeat | round | space ]{1,2}

含义

设置边框遮罩的重复方式， stretch为默认值。类似于border-image-repeat

4.2.6mask-border

语法

mask-border: <' mask-border-source '> || <' mask-border-slice '> [ / <' mask-border-width '> | / <' mask-border-width '>? / <' mask-border-outset '> ]? || <' mask-border-repeat '>

含义

设置边框遮罩的复合属性，类似于border-image

下载demo