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(''), linear-gr程式設計客棧adient(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 | r程式設計客棧ound 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
mask-composite （均不支援 ಥ _ ಥ ）
mask-composite: add | subtract | intersect | exclude;
本文標題: css3 mask 遮罩的具體使用方法
本文位址:
詳解css3 mask遮罩實現一些特效
遮罩mask的功能就是使用透明的或漸變遮罩元素的背景。於是，遮罩mask與背景background非常類似，除了沒有color子屬性，背景background剩下的6個子屬性，mask都有 遮罩mask是乙個復合屬性，包括mask image mask mode mask repeat mask p...
Starling2 x 遮罩Mask的使用
在startling裡的displayobject物件會存在乙個mask的變數，可以把各種形狀賦值進去，來得到乙個新的圖形。其形狀不止侷限於矩形，甚至多邊形，圓形或者更複雜的組合。這一切可以使用canvas來實現多邊形圓形。var image image new image texture var ...
使用CSS 的3種方式
css cascade style sheet 層疊樣式表憑著著 豐富的樣式 簡單易用 重複使用 縮小檔案 等優勢成為了現代網頁必不可少的一樣技術。需要注意的是，目前我們將css定義為樣式表中的一種，未來可能有其他樣式表被開發出來。直白地說，css就是一系列樣式的集合，它用於定義文件元素的外觀表現形...