--- 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>