Übersicht

Der <shape> CSS Datentyp beschreibt die genaue Form eines Bereichs. Dieser Bereich wird benutzt, um zu definieren, auf welchen Teil eines Elements Eigenschaften wie clip angewendet werden.

In der aktuellen Spezifikation kann ein <shape>, obwohl er entworfen wurde, um beliebige Formen zu beschreiben, ausschließlich einen rechteckigen Bereich repräsentieren, der durch die Funktion rect() definiert wird.

Die rect() Funktion

Die rect() Funktion erstellt einen Bereich in Form eines Rechtecks.

Syntax

rect(top, right, bottom, left)

Werte

rect.png

top
Ist eine <length>, die den Versatz der Oberkante des Rechtecks relativ zur Oberkante der Element Box beschreibt.
right
Ist eine <length>, die den Versatz der rechten Kante des Rechtecks relativ zur linken Kante der Element Box beschreibt.
bottom
Ist eine <length>, die den Versatz der Unterkante des Rechtecks relativ zur Oberkante der Element Box beschreibt.
left
Ist eine <length>, die den Versatz der linken Kante des Rechtecks relativ zur linken Kante der Element Box beschreibt.

Interpolation

Werte des <shape> Datentyps, welche Rechtecke darstellen, können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie über ihre top, right, bottom und left Komponenten interpoliert, wovon jede als reale Fließkommazahl behandelt wird. Die Geschwindigkeit der Interpolation wird bestimmt durch die Timing Funktion associated with the animation.

Beispiel

 img.clip04 { 
   clip: rect(10px, 20px, 20px, 10px);
 }

Spezifikation

Spezifikation Status Kommentar
CSS Level 2 (Revision 1)
Die Definition von '<shape>' in dieser Spezifikation.
Empfehlung Definiert durch die clip Eigenschaft

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende Unterstützung
Veraltet
Chrome Vollständige Unterstützung 1Edge ? Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 5.5Opera Vollständige Unterstützung 9.5Safari Vollständige Unterstützung 1.3WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rect()
Veraltet
Chrome Vollständige Unterstützung 1Edge ? Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 5.5
Hinweise
Vollständige Unterstützung 5.5
Hinweise
Hinweise For Internet Explorer versions 5.5 through 7, the rect() function uses spaces (instead of commas) to separate parameters. For Internet Explorer 8 and later versions, only the standard comma-separated syntax is supported.
Opera Vollständige Unterstützung 9.5Safari Vollständige Unterstützung 1.3WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch

  • Verwandte CSS Eigenschaften: clip
  • Die -moz-image-rect() Funktion mit ähnlichen Koordinaten wie rect().

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, SJW, Sebastianz, Prinz_Rana, fscholz
Zuletzt aktualisiert von: mdnwebdocs-bot,