189 8069 5689
这篇文章主要介绍了CSS3中mask遮罩怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
为开阳等地区用户提供了全套网页设计制作服务，及开阳网站建设行业解决方案。主营业务为网站设计制作、做网站、开阳网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
css的mask属性允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。
mask的简写会将 mask-border 设为初始值。使用mask的简写优于其他简写或者各自属性的设置来覆盖。这能保证mask-border也会重新设置为新的效果样式。
mask-image
mask-image 通过读取透明度对html元素进行遮罩，黑色代表透明，白色代表不透明，灰色为半透明。适用于所有元素，在SVG中，它作用于包含
/* 图片资源 */
-webkit-mask-image: url(mask.png);
/* css的渐变属性 */
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
/* image属性 ~ ??? */
-webkit-mask-image: image(url(mask.png), skyblue);
/* 混合属性 */
-webkit-mask-image: url('/upload/otherpic61/7925.jpg'), linear-gradient(rgba(0, 0, 0, 1.0), transparent);mask-repeat
/* 单个值 */
-webkit-mask-repeat: no-repeat | repeat-x | repeat-y | space | round | repeat(默认值);
/* 两个值 horizontal(水平) vertical(垂直) （以下仅为示例）*/
-webkit-mask-repeat: repeat space | repeat repeat | round space | no-repeat round;
/* Multiple values */
-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; /* Multiple values */ -webkit-mask-clip: padding-box, no-clip; -webkit-mask-clip: view-box, fill-box, border-box;
mask-origin
/* Keyword values */ 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; /* Multiple values */ mask-origin: padding-box, content-box; mask-origin: view-box, fill-box, border-box; /* Non-standard keyword values */ -webkit-mask-origin: content; -webkit-mask-origin: padding; -webkit-mask-origin: border;
mask-size
.divTest{
padding: 40px;
background-color: #03ff36;
background-image: url(/upload/otherpic61/7926.gif));
-webkit-mask-image: url(http://image27.360doc.com/DownloadImg/2011/04/2015/11077777_58.png)), url(/upload/otherpic61/7927.png));
-webkit-mask-repeat: space,repeat-y;
-webkit-mask-clip: text;
-webkit-mask-size: 5%, 8%;
border: 30px solid red;
}mask-composite （均不支持 ಥ _ ಥ ）
mask-composite: add | subtract | intersect | exclude;
感谢你能够认真阅读完这篇文章，希望小编分享的“CSS3中mask遮罩怎么用”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!