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