css中的mask，clip，颜色混合及offset不规则运动

站长

2023年07月22日 16:49 · 阅读数 59

一. mask遮罩

1. `mask-image`设置遮罩使用的图像

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

none是默认值,表示默认无遮罩图片
<image>表示图像数据类型,包括css渐变图像,url()函数,image-set()函数,cross-fade()函数和element()函数
<mask-source>表示遮罩元素类型,主要指SVG遮罩元素

2. `mask-mode`设置遮罩模式

mask-mode支持以下三种属性值:

mask-mode:match-source 默认值

mask-mode:luminance 表示基于亮度判断是否要进行遮罩

mask-mode:alpha 表示基于透明度判断是否要进行遮罩

mask-image支持多图片,因此mask-mode也支持多属性值: mask-mode:alpha , match-source

3. `mask-repeat`类似`background-repeat`

支持以下一些单属性值:

mask-repeat:repeat-x;水平方向平铺

mask-repeat:repeat-y; 垂直方向平铺

mask-repeat:repeat; 默认值

mask-repeat:no-repeat; 不平铺,只有一个图像位于左上角

mask-repeat:round;尽可能靠在一起,没有间隙,同时不剪裁,这意味着图像可能会产生缩放效果

mask-repeat:space;尽可能平铺同时不进行剪裁

mask-image支持多图片,因此mask-repeat也支持多属性值: mask-repeat:space,repeat-x;

4. `mask-position`类似`background-position`

表现与background-position基本一致

5. `mask-clip`类似`background-clip`

表现与background-clip基本一致,默认值都是border-box

属性值如下:

mask-clip:border-box;

mask-clip:padding-box;

mask-clip:content-box;

mask-clip:no-clip; 不对元素的遮罩效果做区域上的限制,言外之意就是只要是元素身上'长出来的',都可以应用遮罩,例如轮廓(outline),盒子阴影(box-shadow)

以下3个属性应用于SVG元素上才有效果:

mask-clip:fill-box;

mask-clip:stroke-box;

mask-clip:view-box;

6. `mask-origin`类似`background-origin`

表现与background-origin基本一致,默认值是border-box

属性值如下:

mask-origin:border-box;

mask-origin:padding-box;

mask-origin:content-box;

以下3个属性应用于SVG元素上才有效果:

mask-origin:fill-box;

mask-origin:stroke-box;

mask-origin:view-box;

7. `mask-size`类似`background-size`

表现与background-size基本一致,默认值是auto

mask-size:cover;

mask-size:contain;

8. 了解`mask-type`属性

与mask-mode功能类似,都是设置不同的遮罩模式,但还有一个最大的区别,mask-type只能作用于SVG元素上

9. `mask-composite`表示多张图片遮罩的合成方式

mask-composite:add 表示遮罩累加,默认值

mask-composite:substract 表示遮罩相减,也就是遮罩图片重合的区域不显示,也就意味:遮罩图片越多,遮罩区域越小.

mask-composite:instersect 表示遮罩相交,也就是遮罩图片重合的区域才显示遮罩

mask-composite:exclude 表示遮罩排除,也就是遮罩重合的区域被当成透明的 常用于实现镂空的遮罩效果

二. `clip-path`剪裁属性

可用来对任意元素的可视区域进行剪裁

相比css2.1的clip属性,clip-path不需要将元素设置为绝对定位就能生效,并且剪裁的形状类型远比clip属性丰富得多,clip属性只能对矩形剪裁.

快速了解`clip-path`属性的各个属性值

/* 默认关键字 */
clip-path:none;
/* <clip-source> 值类型 */
clip-path:url(resources.svg#someId);
/* geometry-box 值类型 */
clip-path:margin-box;
clip-path:padding-box;
clip-path:content-box;
clip-path:fill-box;
clip-path:stroke-box;
clip-path:view-box;
/* <basic-shape> 值类型 */
clip-path:inset(100px 50px); /*四边形*/
clip-path:circle(50px at 0 100px);/*圆形*/
clip-path:polygon(50% 0,100% 50%,50% 100%,0 100%); /*多边形*/
clip-path:path('M0.5,1.......'); /*SVG不规则图形*/

clip-path属性中的polygon()函数支持一个名为<fill-rule>的数据类型,表示填充规则.

nonzero evenodd

三. `-webkit-box-reflect`属性与倒影效果的实现

最简单的倒影效果实现只需要一行css代码:

-webkit-box-reflect:below;

语法:-webkit-box-reflect:[above | below | right | left]?<length>?<image>?

倒影和outline box-shadow属性一样,不占据尺寸空间,同时倒影也无法响应点击事件.

四. 使用`offset`属性实现元素的不规则运动

offset属性是多个CSS属性的缩写,相关属性包括:

offset-anchor:auto | <position> 用来确认偏移运动的锚点,也就是确定元素中沿着轨迹运动的点
offset-distance: 表示偏移的距离大小
offset-path表示运动的路径,支持多种路径类型,但从语法来看,它和clip-path有众多相似之处,其语法如下:
- offset-path:none;
- offset-path:ray([<angle> && <size> && <contain>?]);
- offset-path:<path()>;
- offset-path:<url>;
- offset-path:[<basic-shape> || <geometry-box>];
offset-position:auto | <position> 定义路径的起始点
offset-rotate:[auto | reverse] || <angle>用来定义元素沿着offset-path路径运动时的方向和角度,这个CSS属性比offset-position属性使用太多了.

五. 详细了解各种混合模式效果

background-blend-mode属性用于混合元素背景图案,渐变,和颜色
mix-blend-mode属性用于元素和元素之间的混合
isolation属性用在祖先元素上,限制mix-blend-mode属性设置的混合模式的应用范围

其中background-blend-mode与mix-blend-mode支持的混合模式类型是一样的,总共有16种混合模式类型

混合模式类型	释义
normal	正常
multiply	正片叠底
screen	滤色
overlay	叠加
darken	变暗
lighten	变亮
color-dodge	颜色变淡
color-burn	颜色加深
hard-light	强光
soft-light	柔光
difference	差值
exclusion	排除
hue	色调
saturation	饱和度
color	颜色
luminosity	亮度