css3的mask遮罩属性笔记

最新推荐文章于 2024-08-25 20:15:05 发布

zhanle_huang

最新推荐文章于 2024-08-25 20:15:05 发布

阅读量928

点赞数

分类专栏：前端编程类 css3 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/ta_huang/article/details/122606985

版权

前端同时被 3 个专栏收录

42 篇文章 0 订阅

订阅专栏

编程类

37 篇文章 0 订阅

订阅专栏

css3

1 篇文章 0 订阅

订阅专栏

css3的mask遮罩属性笔记

- - mask笔记

mask笔记

通过渐变来绘制显示的区域，透明的则代表不显示，不透明则表示显示

-webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0, #0000 30px), radial-gradient(circle at right, #0000 20px, red 0);

遮罩大小size

-webkit-mask-size: 51%;

重复repeat

-webkit-mask-repeat: no-repeat;

遮罩合成mask-composite

/**
 * 标准属性下mask-composite
 * */
mask-composite: add; /* 叠加（默认） */
mask-composite: subtract; /* 减去，排除掉上层的区域 */
mask-composite: intersect; /* 相交，只显示重合的地方 */
mask-composite: exclude; /* 排除，只显示不重合的地方 */

/**
 * webkit
 * */
-webkit-mask-composite: clear; /*清除，不显示任何遮罩*/
-webkit-mask-composite: copy; /*只显示上方遮罩，不显示下方遮罩*/
-webkit-mask-composite: source-over; 
-webkit-mask-composite: source-in; /*只显示重合的地方*/
-webkit-mask-composite: source-out; /*只显示上方遮罩，重合的地方不显示*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in; /*只显示重合的地方*/
-webkit-mask-composite: destination-out;/*只显示下方遮罩，重合的地方不显示*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /*只显示不重合的地方*/