blob: 4a77f79254612f4abb6aa9b9bec41506c1e86787 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
title: CSS Masking
slug: Web/CSS/CSS_Masking
tags:
- CSS Masking
translation_of: Web/CSS/CSS_Masking
---
<div>{{CSSRef}}</div>
<p><strong>CSS Masking</strong> 是一个 <a href="/en-US/docs/Web/CSS">CSS</a> 模块，它定义了部分或完全隐藏视觉元素部分的方法，包括遮罩和剪裁。</p>
<h2 id="Reference">Reference</h2>
<h3 id="Properties">Properties</h3>
<div class="index">
<ul>
<li>{{cssxref("clip")}} {{deprecated_inline}}</li>
<li>{{cssxref("clip-path")}}</li>
<li>{{cssxref("clip-rule")}}</li>
<li>{{cssxref("mask")}}</li>
<li>{{cssxref("mask-border")}}</li>
<li>{{cssxref("mask-border-mode")}}</li>
<li>{{cssxref("mask-border-outset")}}</li>
<li>{{cssxref("mask-border-repeat")}}</li>
<li>{{cssxref("mask-border-slice")}}</li>
<li>{{cssxref("mask-border-source")}}</li>
<li>{{cssxref("mask-border-width")}}</li>
<li>{{cssxref("mask-clip")}}</li>
<li>{{cssxref("mask-composite")}}</li>
<li>{{cssxref("mask-image")}}</li>
<li>{{cssxref("mask-mode")}}</li>
<li>{{cssxref("mask-origin")}}</li>
<li>{{cssxref("mask-position")}}</li>
<li>{{cssxref("mask-repeat")}}</li>
<li>{{cssxref("mask-size")}}</li>
<li>{{cssxref("mask-type")}}</li>
</ul>
</div>
<h2 id="Guides">Guides</h2>
<p><em>None.</em></p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Masks")}}</td>
<td>{{Spec2("CSS Masks")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support (for SVG)</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>Support for HTML, for <code>mask</code> and <code>mask-*</code> longhand properties</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop(53.0)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support (for SVG)</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>Support for HTML, for <code>mask</code> and <code>mask-*</code> longhand properties</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile(53.0)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
|
