CSS offset-position atrybut

Definicja i użycie

offset-position właściwość określa początkową pozycję elementu na ścieżce.

Jeśli Poprzednia strona Jeśli funkcja nie określa swojej początkowej pozycji, offset-position wartość określa początkową pozycję elementu podczas przesuwania po ścieżce.

Przykład

Przykład 1

Początkowa pozycja elementu powinna być w prawym dolnym rogu:

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

Spróbuj sam!

Przykład 2

Zobacz różne pozycje początkowe przesunięcia:

#square1 {
  width: 40px;
  height: 40px;
  background: pink;
  text-align:center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: red;
  text-align:center;
  offset-position: top right;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: yellow;
  text-align:center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: cyan;
  text-align:center;
  offset-position: auto;
  offset-path: ray(95deg);
}
#square5 {
  width: 40px;
  height: 40px;
  background: lavender;
  text-align:center;
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

Spróbuj sam!

Gramatyka CSS

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

Wartość atrybutu

Szczegóły techniczne

Obsługa przeglądarek

Liczby w tabeli oznaczają wersje przeglądarek, które w pełni obsługują tę właściwość.

相关页面

Ścieżki SVGStrony związane

Ścieżki SVGTutorial:

Animacje CSSCSS offset atrybut

Animacje CSSCSS offset-anchor atrybut

Animacje CSSCSS offset-distance atrybut

Animacje CSSCSS offset-path atrybut

Animacje CSSCSS offset-rotate atrybut