mask遮罩層詳解
mask簡介
css的mask屬性允許使用者通過部分或者完全隱藏一個元素的可見區域。這種效果可以通過遮罩或者裁切特定區域的圖片。mask和background用法是相仿的，mask的值有這些：
- mask-clip
- mask-composite
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- mask-type
下面具體介紹每一個值的意義
1. mask-clip
| 值 | 含義 |
|---|---|
| content-box | 將繪製的內容剪下到內容框中。 |
| padding-box | 將繪製的內容剪下到padding框中。 |
| border-box | 將繪製的內容剪下到border框中。 |
| margin-box | 將繪製的內容剪下到margin框中。 |
| fill-box | 將繪製的內容剪下到物件邊界框中。 |
| stroke-box | 將繪製的內容剪下到stroke邊界框中。 |
| view-box | 使用最近的SVG視口作為參考框。 如果為建立SVG視口的元素指定了viewBox屬性，則參考框 位於由viewBox屬性建立的座標系的原點，並且參考框的尺寸 被設定為viewBox屬性的寬度和高度值。 |
| no-clip | 沒有被剪下。 |
mask-clip的預設值是border-box，而且支援多屬性值，例如：
mask-clip: content-box, border-box;
雖然支援的屬性值挺多，但是對於普通元素而言，生效的其實就前面4個，Firefox瀏覽器還支援no-clip。fill-box，stroke-box，view-box要與SVG元素關聯才有效果，目前還沒有任何瀏覽器對其進行支援。
2. mask-composite
| 值 | 含義 |
|---|---|
| add | 遮罩累加。 |
| subtract | 遮罩相減。也就是遮罩圖片重合的地方不顯示。 |
| intersect | 遮罩相交。也就是遮罩圖片重合的地方才顯示遮罩。 |
| exclude | 遮罩排除。也就是後面遮罩圖片重合的地方排除，當作透明處理。 |
以上屬性值，目前僅Firefox瀏覽器支援，Chrome預設mask-composite計算值是source-over，和標準預設值add有些差異，作用是一樣的，表示多個圖片遮罩效果是累加。
3. mask-image
mask-image指遮罩使用的圖片資源，預設值是none，也就是無遮罩圖片。所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分。
mask-image也支援多屬性值，例如：
mask-image: url(...), url(...);
4. mask-mode
mask-mode屬性的預設值是match-source，意思是根據資源的型別自動採用合適的遮罩模式。
例如，如果我們的遮罩使用的是SVG中的<defs>中的<mask>元素，則此時的mask-mode屬性的計算值是luminance，表示基於亮度遮罩。如果是其他場景，則計算值是alpha，表示基於透明度遮罩。
| 值 | 含義 |
|---|---|
| alpha | 基於透明度遮罩 |
| luminance | 基於亮度遮罩 |
| match-source | 根據資源的型別自動採用合適的遮罩模式 |
mask-mode也支援多屬性值，例如：
mask-mode: alpha, match-source;
目前，mask-mode僅Firefox瀏覽器支援，因此，Chrome瀏覽器是看到的依然是基於alpha遮罩的效果，顏色不像上圖那樣淡。
5. mask-repeat
| 值 | 含義 |
|---|---|
| repeat-x | 水平x平鋪 |
| repeat-y | 垂直y平鋪 |
| repeat | 預設值，水平和垂直平鋪 |
| no-repeat | 不平鋪 |
| space | 表示遮罩圖片儘可能的平鋪同時不發生任何剪裁 |
| round | 表示遮罩圖片儘可能靠在一起沒有任何間隙，同時不發生任何剪裁。 這就意味著圖片可能會有比例的縮放。 |
mask-repeat也支援多屬性值，例如：
mask-repeat: space round, no-repeat;
6. mask-position
- 支援單個關鍵字，如top，bottom，left，right，center（預設關鍵字的解析為center）
- 支援各類數值（百分數或數值），例如：
mask-position: 30% 50%; - mask-position也支援多屬性值，例如：
mask-position: 0 0, center;
Chrome和Firefox瀏覽器都支援mask-position屬性，Chrome還需要-webkit-私有字首，Firefox瀏覽器現在已經不需要了。
7. mask-origin
| 值 | 含義 |
|---|---|
| content-box | 位置相對於內容框。 |
| padding-box | 位置相對於padding框。 |
| border-box | 位置相對於border框。 |
| margin-box | 位置相對於margin框。 |
| fill-box | 位置相對於物件邊界框。 |
| stroke-box | 位置相對於stroke邊界框。 |
| view-box | 使用最近的SVG視口作為參考框。 如果為建立SVG視口的元素指定了viewBox屬性，則參考框 位於由viewBox屬性建立的座標系的原點，並且參考框的尺寸 被設定為viewBox屬性的寬度和高度值。 |
mask-origin的預設值是border-box，而且支援多屬性值，例如：
mask-origin: content-box, border-box;
雖然支援的屬性值挺多，但是對於普通元素而言，生效的其實就前面4個。fill-box，stroke-box，view-box要與SVG元素關聯才有效果，目前還沒有任何瀏覽器對其進行支援。
8. mask-size
mask-size作用是控制遮罩圖片尺寸，預設值是auto。
- 支援contain和cover這兩個關鍵字
- 支援各類數值（預設高度會自動計算為auto），例如：
mask-size: auto 6px;
同樣支援多屬性值，例如：mask-size: 50%, 25%, 25%;
9. mask-type
mask-type屬性功能上和mask-mode類似，都是設定不同的遮罩模式。但還是有個很大的區別，那就是mask-type只能作用在SVG元素上，本質上是由SVG屬性演變而來，因此，Chrome等瀏覽器都是支援的。但是mask-mode是一個針對所有元素的CSS3屬性，Chrome等瀏覽器並不支援，目前僅Firefox瀏覽器支援。
由於只能作用在SVG元素上，因此預設值表現為SVG元素預設遮罩模式，也就是預設值是luminance，亮度遮罩模式。如果需要支援透明度遮罩模式，可以這麼設定：mask-type: alpha;