Proprietà offset-position CSS

Definizione e uso

offset-position L'attributo specifica la posizione iniziale dell'elemento lungo il percorso.

Se Pagina precedente Se la funzione non specifica la propria posizione iniziale, offset-position Il valore determina la posizione iniziale dell'elemento durante lo spostamento lungo il percorso di offset.

Esempio

Esempio 1

La posizione iniziale dell'elemento specificato dovrebbe essere in basso a destra:

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

Prova a te stesso

Esempio 2

Visualizza diverse posizioni di inizio di offset:

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

Prova a te stesso

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
normal Imposta l'inizio dell'offset al 50% 50% del blocco contenitore. Valore predefinito.
auto Imposta l'inizio dell'offset al vertice in alto a sinistra del riquadro dell'elemento.
position

Specificare un coordinate x/y, posizionare l'elemento rispetto ai margini del suo riquadro.

Puoi definire la posizione utilizzando da 1 a 4 valori.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: normal
Ereditarietà: No
Creazione dell'animazione: Supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.offsetPosition="auto"

Supporto del browser

Le numeri nella tabella rappresentano la versione del browser che supporta completamente l'attributo.

Chrome Edge Firefox Safari Opera
116 116 122 16 102

相关页面

Percorso SVGPagine correlate

Percorso SVGTutorial:

Animazione CSSProprietà offset CSS

Animazione CSSProprietà offset-anchor CSS

Animazione CSSProprietà offset-distance CSS

Animazione CSSProprietà offset-path CSS

Animazione CSSProprietà offset-rotate CSS