<shape> CSS-Typ
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.
Der <shape> CSS Datentyp definiert die spezifische Form (Shape) einer Region. Die Region stellt den Teil eines Elements dar, auf den die clip-Eigenschaft angewendet wird.
Hinweis:
<shape> und rect() funktionieren in Verbindung mit clip, das zugunsten von clip-path als veraltet gilt. Wenn möglich, verwenden Sie clip-path und den <basic-shape>-Datentyp stattdessen.
Syntax
Der <shape>-Datentyp wird mit der rect()-Funktion spezifiziert, die eine Region in Form eines Rechtecks erzeugt.
rect()
rect(top, right, bottom, left)
Werte
- top
-
Ist eine
<length>, die den Versatz für die Oberseite des Rechtecks relativ zur oberen Grenze des Elementrahmens darstellt. - right
-
Ist eine
<length>, die den Versatz für die rechte Seite des Rechtecks relativ zur linken Grenze des Elementrahmens darstellt. - bottom
-
Ist eine
<length>, die den Versatz für die Unterseite des Rechtecks relativ zur oberen Grenze des Elementrahmens darstellt. - left
-
Ist eine
<length>, die den Versatz für die linke Seite des Rechtecks relativ zur linken Grenze des Elementrahmens darstellt.
Interpolation
Bei Animationen werden die Werte des <shape>-Datentyps über ihre top-, right-, bottom- und left-Komponenten interpoliert, wobei jede als reelle, Gleitkommazahl behandelt wird. Die Geschwindigkeit der Interpolation wird durch die mit der Animation verbundene Beschleunigungsfunktion bestimmt.
Beispiel
Beispiel, das die korrekte Verwendung der rect()-Funktion zeigt
img.clip04 {
clip: rect(10px, 20px, 20px, 10px);
}
Spezifikationen
| Spezifikation |
|---|
| Cascading Style Sheets Level 2 # value-def-shape |
Browser-Kompatibilität
Siehe auch
- Verwandte CSS-Eigenschaft:
clip