CSS offset-position egenskap

Definition och användning

offset-position egenskapen specificerar elementets initiala position på vägen.

om Föregående sida om funktionen inte specificerar sin egna startposition, offset-position värdet bestämmer elementets initiala position när det rör sig längs den offset-påvägen.

Exempel

Exempel 1

Den initiala positionen för det specifika elementet bör vara nederkanten till höger:

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

Prova själv

Exempel 2

Se olika startpositioner för avståndet:

#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);
}

Prova själv

CSS-syntax

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

Egenskapsvärde

Tekniska detaljer

Webbläsarstöd

Tabellens siffror representerar den första webbläsarens version som helt stöder egenskapen.

相关页面

SVG pathRelaterade sidor

SVG pathTutorial:

CSS animationCSS offset egenskap

CSS animationCSS offset-anchor egenskap

CSS animationCSS offset-distance egenskap

CSS animationCSS offset-path egenskap

CSS animationCSS offset-rotate egenskap