clip

Unerw├╝nscht

Dieses Feature wurde aus den Webstandards entfernt. Obwohl manche Browser es immer noch unterst├╝tzen, wird es zuk├╝nftig wegfallen. Es sollte daher nicht mehr in alten oder neuen Projekten verwendet werden. Webseiten oder Webapps, die es benutzen, funktionieren m├Âglicherweise irgendwann nicht mehr korrekt.

├ťbersicht

Die clip CSS Eigenschaft definiert, welcher Teil eines Elements sichtbar ist. Sie gilt nur f├╝r Elemente mit position:absolute.

Warnung: Diese Eigenschaft ist veraltet. Es sollte stattdessen clip-path verwendet werden.

Initialwertauto
Anwendbar aufabsolut positionierte Elemente
VererbtNein
Berechneter Wertauto, falls als auto angegeben, ansonsten ein Rechteck mit vier Werten, von denen jeder auto ist, falls als auto angegeben, ansonsten die berechnete L├Ąnge
AnimationstypRechteck

Syntax

/* 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;

Werte

<shape>
Ein rechteckiger <shape> Wert der Form rect(<top>, <right>, <bottom>, <left>) oder rect(<top> <right> <bottom> <left>) wobei <top> und <bottom> Vers├Ątze von der Innenseite des oberen Randes der Box angeben und <right> und <left> Vers├Ątze von der Innenseite des linken Randes der Box ÔÇö d. h. die Ausma├če der Innenabstandsbox.
<top>, <right>, <bottom> und <left> k├Ânnen entweder einen <length> Wert haben oder auto. Falls der Wert irgendeiner Seite auto ist, wird das Element an der Innenseite des Randes dieser Seite abgeschnitten.
auto
Das Element wird nicht abgeschnitten (Standardwert). Zu beachten ist, dass sich dies von rect(auto, auto, auto, auto) unterscheidet, welches das Element an den Innenseiten der R├Ąnder des Elements abschneidet.

Formale Syntax

<shape> | auto

wobei
<shape> = rect(<top>, <right>, <bottom>, <left>)

Beispiele

.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 */
}
<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>

Spezifikationen

Spezifikation Status Kommentar
CSS Masking Module Level 1
Die Definition von 'clip' in dieser Spezifikation.
Anw├Ąrter Empfehlung Markiert die clip Eigenschaft als veraltet, schl├Ągt clip-path als Ersatz vor.
CSS Transitions
Die Definition von 'clip' in dieser Spezifikation.
Arbeitsentwurf Definiert clip als animierbar.
CSS Level 2 (Revision 1)
Die Definition von 'clip' in dieser Spezifikation.
Empfehlung Urspr├╝ngliche Definition

Browser Kompatibilit├Ąt

BCD tables only load in the browser

Siehe auch