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 werden ermutigt, 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, das mit einer
rect()-Funktion der Formrect(<top>, <right>, <bottom>, <left>)definiert wird. Die Werte<top>und<bottom>sind Versätze vom inneren oberen Rand der Box, während<right>und<left>Versätze vom inneren linken Rand der Box sind — das heißt, dem Umfang der Padding-Box.Die Werte
<top>,<right>,<bottom>, und<left>können entweder eine<length>oderautosein. Wenn der Wert einer Seiteautoist, wird das Element an diese Seite des inneren Randes geklippt.
Hinweis:
Die rect()-<shape>-Funktion, die in der veralteten clip-Eigenschaft verwendet wird, unterscheidet sich von der CSS-rect()-Funktion, die verwendet wird, um eine CSS-<basic-shape> zu definieren.
auto-
Das Element wird nicht geklippt (Standard). Dies ist anders als
rect(auto, auto, auto, auto), welches zu den inneren Rändern des Elements klippt.
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
Ein Bild klippen
<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 |