clip CSS property
Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.
Warnung:
Autoren wird empfohlen, stattdessen die Eigenschaft clip-path zu verwenden.
Die clip CSS-Eigenschaft definiert einen sichtbaren Bereich eines Elements. Die clip-Eigenschaft gilt nur für absolut positionierte Elemente, das heißt, Elemente mit position:absolute oder position:fixed.
Syntax
/* Keyword value */
clip: auto;
/* <shape> values */
clip: rect(1px, 10em, 3rem, 2ch);
/* Global values */
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;
Werte
rect()-
Ein Rechteck, definiert durch eine
rect()-Funktion der Formrect(<top>, <right>, <bottom>, <left>). Die Werte<top>und<bottom>sind Abstände vom inneren oberen Rand des Rahmens der Box, während<right>und<left>Abstände vom inneren linken Rand des Rahmens der Box sind – also vom Umfang des Innenraums der Box.Die Werte
<top>,<right>,<bottom>, und<left>können entweder eine<length>oderautosein. Wenn der Wert einer Seiteautoist, wird das Element an der inneren Rahmenkante dieser Seite abgeschnitten.
Hinweis:
Die in der veralteten clip-Eigenschaft verwendete rect()-<shape>-Funktion unterscheidet sich von der CSS-rect()-Funktion, die verwendet wird, um eine CSS-<basic-shape> zu definieren.
auto-
Das Element wird nicht abgeschnitten (Standard). Dies ist anders als
rect(auto, auto, auto, auto), welches das Element an den inneren Rahmenkanten abschneidet.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | absolut positionierte Elemente |
| Vererbt | Nein |
| Berechneter Wert | auto, falls als auto angegeben, ansonsten ein Rechteck mit vier Werten, von denen jeder auto ist, falls als auto angegeben, ansonsten die berechnete Länge |
| Animationstyp | Rechteck |
Formale Syntax
clip =
<rect()> |
auto
<rect()> =
rect( <top> , <right> , <bottom> , <left> )
Beispiele
Zuschneiden eines Bildes
<p class="dotted-border">
<img src="macarons.png" alt="Original graphic" />
<img id="top-left" src="macarons.png" alt="Graphic clipped to upper left" />
<img id="middle" src="macarons.png" alt="Graphic clipped towards middle" />
<img
id="bottom-right"
src="macarons.png"
alt="Graphic clipped to bottom right" />
</p>
.dotted-border {
border: dotted;
position: relative;
width: 390px;
height: 400px;
}
#top-left,
#middle,
#bottom-right {
position: absolute;
top: 0;
}
#top-left {
left: 400px;
clip: rect(0, 130px, 90px, 0);
}
#middle {
left: 270px;
clip: rect(100px, 260px, 190px, 130px);
}
#bottom-right {
left: 140px;
clip: rect(200px, 390px, 290px, 260px);
}
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # clip-property |