<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 (Gestalt) einer Region. Die Region stellt den Teil eines Elements dar, auf den die clip-Eigenschaft angewendet wird.
Hinweis:
<shape> und rect() arbeiten in Verbindung mit clip, das zugunsten von clip-path als veraltet gilt. Wann immer möglich, sollten Sie clip-path und den <basic-shape>-Datentyp verwenden.
Syntax
Der <shape>-Datentyp wird mithilfe der rect()-Funktion angegeben, die eine Region in Form eines Rechtecks erzeugt.
rect()
rect(top, right, bottom, left)
Werte
- top
-
Ist ein
<length>, der den Versatz für die Oberseite des Rechtecks relativ zur oberen Grenze des Element-Box angibt. - right
-
Ist ein
<length>, der den Versatz für die rechte Seite des Rechtecks relativ zur linken Grenze des Element-Box angibt. - bottom
-
Ist ein
<length>, der den Versatz für die Unterseite des Rechtecks relativ zur oberen Grenze des Element-Box angibt. - left
-
Ist ein
<length>, der den Versatz für die linke Seite des Rechtecks relativ zur linken Grenze des Element-Box angibt.
Interpolation
Bei Animationen werden Werte des <shape>-Datentyps über ihre top, right, bottom und left Komponenten interpoliert, wobei jede als reale Gleitkommazahl behandelt wird. Die Geschwindigkeit der Interpolation wird durch die mit der Animation verbundene Easing-Funktion bestimmt.
Beispiel
Beispiel zur korrekten Verwendung der rect()-Funktion
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
