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
|
---
title: clip
slug: Web/CSS/clip
tags:
- CSS
- CSS Eigenschaft
- NeedsMobileBrowserCompatibility
- Referenz
- Veraltet
translation_of: Web/CSS/clip
---
<div>{{CSSRef}}{{deprecated_header}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <code>clip</code> CSS Eigenschaft definiert, welcher Teil eines Elements sichtbar ist. Sie gilt nur für Elemente mit {{cssxref("position","position:absolute")}}.</p>
<div class="warning">
<p><strong>Warnung:</strong> Diese Eigenschaft ist veraltet. Es sollte stattdessen {{cssxref("clip-path")}} verwendet werden.</p>
</div>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush:css">/* Schlüsselwortwert */
clip: auto;
/* <shape> Werte */
clip: rect(1px 10em 3rem 2ch);
clip: rect(1px, 10em, 3rem, 2ch);
/* Globale Werte */
clip: inherit;
clip: initial;
clip: unset;
</pre>
<h3 id="Werte">Werte</h3>
<dl>
<dt><code><shape></code></dt>
<dd>Ein rechteckiger {{cssxref("<shape>")}} Wert der Form <code>rect(<top>, <right>, <bottom>, <left>)</code> oder <code> rect(<top> <right> <bottom> <left>)</code> wobei <code><top></code> und <code><bottom></code> Versätze von der <em>Innenseite des oberen Randes</em> der Box angeben und <code><right></code> und <code><left></code> Versätze von der <em>Innenseite des linken Randes</em> der Box — d. h. die Ausmaße der Innenabstandsbox.</dd>
<dd><code><top></code>, <code><right></code>, <code><bottom></code> und <code><left></code> können entweder einen {{cssxref("<length>")}} Wert haben oder <code>auto</code>. Falls der Wert irgendeiner Seite <code>auto</code> ist, wird das Element an der <em>Innenseite des Randes</em> dieser Seite abgeschnitten.</dd>
<dt><code>auto</code></dt>
<dd>Das Element wird nicht abgeschnitten (Standardwert). Zu beachten ist, dass sich dies von <code>rect(auto, auto, auto, auto)</code> unterscheidet, welches das Element an den Innenseiten der Ränder des Elements abschneidet.</dd>
</dl>
<h3 id="Formale_Syntax">Formale Syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Beispiele">Beispiele</h2>
<pre class="brush:css">.dotted-border {
border: dotted;
position: relative;
width: 536px;
height: 350px;
}
#top-left, #middle, #bottom-right {
position: absolute;
top: 0px;
}
#top-left {
left: 360px;
clip: rect(0px, 175px, 113px, 0px);
}
#middle {
left: 280px;
clip: rect(119px, 255px, 229px, 80px);
/* Standardsyntax, nicht unterstützt von Internet Explorer 4-7 */
}
#bottom-right {
left: 200px;
clip: rect(235px 335px 345px 160px);
/* Nicht-standardisierte Syntax, jedoch von allen gängigen Browsern unterstützt */
}</pre>
<pre class="brush:html"><p class="dotted-border">
<img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Originalgrafik" />
<img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die oben links abgeschnitten ist">
<img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die zur Mitte hin abgeschnitten ist">
<img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die unten rechts abgeschnitten ist">
</p></pre>
<p>{{EmbedLiveSample('Beispiele', '689px', '410px')}}</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Masks', '#clip-property', 'clip')}}</td>
<td>{{Spec2('CSS Masks')}}</td>
<td>Markiert die <code>clip</code> Eigenschaft als veraltet, schlägt {{cssxref("clip-path")}} als Ersatz vor.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Definiert <code>clip</code> als animierbar.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Ursprüngliche Definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
{{Compat("css.properties.clip")}}
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>Verwandte CSS Eigenschaften: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("overflow")}}, {{Cssxref("display")}}, {{Cssxref("position")}}</li>
</ul>
|
