clip

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: Wo möglich, werden Autoren ermutigt, stattdessen die neuere clip-path-Eigenschaft zu verwenden.

Die clip-CSS-Eigenschaft definiert einen sichtbaren Teil eines Elements. Die clip-Eigenschaft gilt nur für absolut positionierte Elemente — das heißt, Elemente mit position:absolute oder position:fixed.

Syntax

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

<shape>

Eine rechteckige <shape> der Form rect(<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 — das heißt, dem Umfang der Innenabstand-Box.

Die Werte <top>, <right>, <bottom>, und <left> können entweder eine <length> oder auto sein. Wenn der Wert einer Seite auto ist, wird das Element bis zum inneren Rand der Box dieser Seite beschnitten.

auto

Das Element wird nicht beschnitten (Standard). Dies unterscheidet sich von rect(auto, auto, auto, auto), das bis zu den inneren Rändern des Elements beschnitten wird.

Formale Definition

Anfangswertauto
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

Formale Syntax

clip = 
<rect()> |
auto

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

Beispiele

Zuschneiden eines Bildes

html
<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>
css
.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

Specification
CSS Masking Module Level 1
# clip-property

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
clip
Deprecated
auto
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.
See implementation notes.

Siehe auch