CSS offset-position egenskab

Forrige side offset-path
Næste side offset-rotate

定义和用法

offset-position 属性指定元素在路径上的初始位置。

如果 offset-path 函数未指定其自身的起始位置，则 offset-position 的值决定了元素在沿偏移路径移动时的初始位置。

实例

例子 1

指定元素的初始位置应为右下角：

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

Prøv det selv

Eksempel 2

Se forskellige afstandsstartpositioner:

#square1 {
  width: 40px;
  height: 40px;
  background: lyserøde;
  text-align:center;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 40px;
  height: 40px;
  background: røde;
  text-align:center;
  offset-position: top right;
  offset-path: ray(25deg);
}
#square3 {
  width: 40px;
  height: 40px;
  background: gule;
  text-align:center;
  offset-position: normal;
  offset-path: ray(45deg);
}
#square4 {
  width: 40px;
  height: 40px;
  background: cyansin;
  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);
}

Prøv det selv

CSS syntaks

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

Egenskabsværdi

Værdi	Beskrivelse
normal	Sæt afstandsstartpositionen til indholdskontainerens 50% 50%. Standardværdi.
auto	Sæt afstandsstartpositionen til elementets ramme øverste venstre hjørne.
position	Angiv en x/y koordinat og placér elementet relativt til dens ramme kant. Man kan definere positionen ved hjælp af 1 til 4 værdier.
initial	Sæt denne egenskab til dens standardværdi. Se: initial.
inherit	Arv denne egenskab fra dens forældrelige element. Se: inherit.

Tekniske detaljer

Standardværdi:	normal
Arv:	Nej
Animation production:	Understøttelse. Se:Animation relaterede egenskaber.
Version:	CSS3
JavaScript syntaks:	object.style.offsetPosition="auto"