clip CSS property
Deprecated
Avoid using this feature in new projects.
The CSS Masking specification deprecated the clip property.
This feature may be a candidate for removal from web standards or browsers.
Consider using the following features instead: clip-path.
Warnung:
Autoren wird empfohlen, stattdessen die clip-path-Eigenschaft zu verwenden.
Die clip CSS-Eigenschaft definiert einen sichtbaren Abschnitt 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
Diese Eigenschaft wird als einzelner Wert aus der folgenden Liste angegeben:
rect()-
Ein Rechteck, das mit einer
rect()-Funktion der Formrect(<top>, <right>, <bottom>, <left>)definiert wird. Die<top>- und<bottom>-Werte sind Versätze vom inneren oberen Rand des Rahmens, während<right>und<left>Versätze vom inneren linken Rand des Rahmens sind — das bedeutet, die Ausdehnung des Innenabstandsrahmens.Die
<top>,<right>,<bottom>und<left>Werte können entweder eine<length>oderautosein. Wenn ein Wert einer Seiteautoist, wird das Element bis zur inneren Rahmenkante dieser Seite geschnitten.
Hinweis:
Die rect() <shape>-Funktion, die in der veralteten clip-Eigenschaft verwendet wird, unterscheidet sich von der CSS rect()-Funktion, die zur Definition einer CSS <basic-shape> verwendet wird.
auto-
Das Element wird nicht geschnitten (Standard). Dies unterscheidet sich von
rect(auto, auto, auto, auto), das bis zu den inneren Rahmenkanten des Elements schneidet.
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 # propdef-clip |