css的mask属性允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。本文主要介绍了css3 mask 遮罩的具体使用方法，详细的介绍了css3 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('D:pic/2025-03-11/https://cdn.chuangxiangniao.com/2025/03/20250313093744225.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
.pTest{ padding: 40px; background-color: #03ff36; background-image: url(http://cdn01.baidu-img.cn/timg?image_search&quality=80&size=b10000_10000&sec=1470644878&di=f054ab9449175833cf84b3429acacd88&imgtype=jpg&src=http%3A%2F%2Fimg0.bdstatic.com%2Fimg%2Fimage%2Fshouye%2Fxiaoxiao%2Fis099s8ky-PC.jpg)); -webkit-mask-image: url(http://image27.360doc.com/DownloadImg/2011/04/2015/11077777_58.png)), url(D:pic/2025-03-11/https://cdn.chuangxiangniao.com/2025/03/20250313173745876.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;
登录后复制
相关推荐：
有关php umask()函数的文章推荐10篇
使用CSS mask 实现图片的斜线拼接_html/css_WEB-ITnose
jQuery 页面 Mask实现代码_jquery
以上就是实例讲解CSS3 mask的具体使用方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2900911.html
