css3的mask遮罩属性笔记

mask笔记

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

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

2. 遮罩大小size

-webkit-mask-size: 51%;

3. 重复repeat

-webkit-mask-repeat: no-repeat;

4. 遮罩合成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; /*只显示不重合的地方*/