CSS offset-position ominaisuus

Määrittely ja käyttö

offset-position ominaisuus määrittää elementin alkuperäisen sijainnin polulla.

Jos Edellinen sivu Jos funktio ei määritä omaa alkuperäistä sijaintiaan, offset-position arvo määrittää elementin alkuperäisen sijainnin siirryttäessä siirtymäpolun suuntaan。

Esimerkki

Esimerkki 1

Määritetyn elementin alkuperäinen sijainti tulisi olla oikea alakulma：

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

Kokeile itse

Esimerkki 2

Näytä erilaiset etäisyyden alkupisteet:

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

Kokeile itse

CSS-kieli

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

Ominaisuusarvo

Tekninen yksityiskohta

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen täysin tukevan selaimen version.

相关页面

SVG polkuLiittyvät sivut

SVG polkuOppitunti:

CSS animaatioCSS offset ominaisuus

CSS animaatioCSS offset-anchor ominaisuus

CSS animaatioCSS offset-distance ominaisuus

CSS animaatioCSS offset-path ominaisuus

CSS animaatioCSS offset-rotate ominaisuus