CSS3 mask (CSS遮罩)
mask 是指通过在特定点遮盖或者剪裁改变元素的外观。
mask-image
-webkit-mask-image: url(mask.png);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
-webkit-mask-image: image(url(mask.png), skyblue);
-webkit-mask-image: url(mask.png), linear-gradient(rgba(0, 0, 0, 1.0), transparent);
mask-repeat
-webkit-mask-repeat: no-repeat | repeat-x | repeat-y | space | round | repeat(默认值);
-webkit-mask-repeat: repeat space | repeat repeat | round space | no-repeat round;
-webkit-mask-repeat: space round, no-repeat;
-webkit-mask-repeat: round repeat, space, repeat-x;
mask-image: url('mask1.png'), url('mask2.png');
mask-repeat: repeat-x, repeat-y;
mask-clip
-webkit-mask-clip: content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box | no-clip;
-webkit-mask-clip: border;
-webkit-mask-clip: padding;
-webkit-mask-clip: content;
-webkit-mask-clip: text;
-webkit-mask-clip: padding-box, no-clip;
-webkit-mask-clip: view-box, fill-box, border-box;
mask-origin
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;
-webkit-mask-origin: content;
-webkit-mask-origin: padding;
-webkit-mask-origin: border;
mask-size
.box{
padding: 40px;
background-color: #03ff36;
background-image: url(bg.png));
-webkit-mask-image: url(mask.png));
-webkit-mask-repeat: space,repeat-y;
-webkit-mask-clip: text;
-webkit-mask-size: 5%, 8%;
border: 30px solid red;
}