CSS offset-position Eigenschaft

Definition und Verwendung

offset-position die Eigenschaft die Initialposition des Elements auf dem Pfad angibt.

wenn offset-path wenn die Funktion nicht ihre eigene Startposition spezifiziert, dann offset-position bestimmt die Initialposition des Elements während des Verschiebens entlang des Offset-Pfades.

Beispiel

Beispiel 1

Die Initialposition des spezifischen Elements sollte unten rechts sein:

#square {
  width: 60px;
  height: 60px;
  background: blau;
  offset-position: bottom right;
  offset-path: ray(45deg);
}

Probieren Sie es selbst aus

Beispiel 2

Sehen Sie sich verschiedene Startpunkte der Verschiebung an:

#square1 {
  width: 40px;
  height: 40px;
  background: rosa;
  text-align: center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: rot;
  text-align: center;
  offset-position: top right;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: gelb;
  text-align: center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: cyani;
  text-align: center;
  offset-position: auto;
  offset-path: ray(95deg);
}
#square5 {
  width: 40px;
  height: 40px;
  background: lavendel;
  text-align: center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

Probieren Sie es selbst aus

CSS-Syntax

offset-position: auto|normal|position|initial|inherit;

Eigenschaftswert

Wert Beschreibung
normal Setze den Startpunkt der Verschiebung auf 50% 50% des umschließenden Blocks. Standardwert.
auto Setze den Startpunkt der Verschiebung auf die obere linke Ecke des Elementsrahmens.
position

Bestimme einen x/y-Koordinatenpunkt und platziere das Element相对于其框边缘相对于其框边缘.

Es können 1 bis 4 Werte verwendet werden, um die Position zu definieren.
initial Diese Eigenschaft auf ihren Standardwert setzen. Siehe: initial.
inherit Diese Eigenschaft wird von ihrem Elternelement geerbt. Siehe: inherit.

Technische Details

Standardwert: normal
Vererbbarkeit: Nein
Animationsproduktion: Unterstützt. Siehe:Animationsbezogene Eigenschaften.
Version: CSS3
JavaScript-Syntax: object.style.offsetPosition="auto"

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Eigenschaft vollständig unterstützen.

Chrome Edge Firefox Safari Opera
116 116 122 16 102

Verwandte Seiten

Tutorial:SVG-Pfad

Tutorial:CSS-Animation

Referenz:CSS offset Eigenschaft

Referenz:CSS offset-anchor Eigenschaft

Referenz:CSS offset-distance Eigenschaft

Referenz:CSS offset-path Eigenschaft

Referenz:CSS offset-rotate Eigenschaft