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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
---
title: clip
slug: Web/CSS/clip
translation_of: Web/CSS/clip
---
<div>{{CSSRef}}{{deprecated_header}}</div>
<h2 id="概述">概述</h2>
<p><code>clip</code> 属性定义了元素的哪一部分是可见的。<code>clip</code> 属性只适用于 {{ cssxref("position","position:absolute") }} 的元素。</p>
<div class="warning">
<p>警告：这个属性已被废弃。建议使用 {{cssxref("clip-path")}} 。</p>
</div>
<p>{{cssinfo}}</p>
<h2 id="语法">语法</h2>
<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">形式语法</a>: {{csssyntax("clip")}}
</pre>
<pre>clip: rect(1px, 10em, 3rem, 2ch)
clip: auto
clip: inherit</pre>
<h3 id="值">值</h3>
<dl>
<dt><code><shape></code></dt>
<dd>一个矩形 {{cssxref("<shape>")}}
<pre style="margin: 0;">rect(<top>, <right>, <bottom>, <left>) /* 标准语法 */
</pre>
或
<pre style="margin: 0;">rect(<top> <right> <bottom> <left>) /* 向后兼容语法 */</pre>
<code><top></code> 和 <code><bottom></code> 指定相对于盒子<em>上边框边界 </em>的偏移，<code><right></code> 和 <code><left></code> 指定了相对于盒子<em>左边框边界 </em>的偏移。</dd>
<dd><code><top></code>， <code><right></code>， <code><bottom></code>， 和 <code><left></code> 的值可以是 {{cssxref("<length>")}} 值或 <code>auto</code>。</dd>
<dt><code>auto</code></dt>
<dd>元素不裁剪(默认值)</dd>
</dl>
<h2 id="示例">示例</h2>
<pre class="brush:css">p { border:dotted; position:relative; }
#img2 {
position:absolute; left:263px;
clip: rect(40px, 200px, 150px, 30px);
/* 标准语法，Internet Explorer 4-7 不支持 */
}
#img3 {
position: absolute; left:526px;
clip: rect(40px 200px 150px 30px);
/* 非标准语法，但是包括火狐与 IE 在内的主要浏览器均支持 */
}</pre>
<p style="position: relative; border: dotted;"><img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg"> <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style=""> <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style=""></p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
</thead>
<tbody>
</tbody>
</table>
<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('CSS3 Transitions', '#animatable-css', 'clip') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>Defines <code>clip</code> as animatable.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'visufx.html#clipping', 'clip') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="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 rowspan="2">Basic support</td>
<td rowspan="2">1.0</td>
<td rowspan="2">1.0 (1.0)</td>
<td>4.0</td>
<td rowspan="2">7.0</td>
<td rowspan="2">1.0 (85)</td>
</tr>
<tr>
<td>8.0<br>
该版本支持逗号语法。</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</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>Related CSS properties: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("overflow") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}</li>
</ul>
|
