CSS offset-ankerknop eigenschap

Vorige pagina offset
Volgende pagina offset-distance

Definitie en gebruik

offset-anchor Eigenschap specificeert dat het element op een vastgesteld door offset-path punten op de pad gedefinieerd door de eigenschap.

Als offset-rotate Eigenschap roteert het element, dan offset-anchor De punten die door de eigenschap worden gedefinieerd, worden ook het roteringscentrum.

Voorbeeld

Fixeer het rechtermiddenpunt van de <img>-element op de gedefinieerde pad:

img {
  offset-path: path('M 50 80 C 150 -20 250 180 350 80');
  offset-anchor: right center;
}

Probeer het zelf uit

CSS syntax

offset-anchor: auto|value|initial|inherit;

Eigenschapswaarde

Waarde	Beschrijving
auto	Standaardwaarde. De ankerpunt ligt in het midden van het element, equivalente aan de waarde 50% 50%.
left top left center left bottom right top right center right bottom center top center center center bottom	Als alleen één keyword wordt gespecificeerd, is de andere waarde "center".
xpos ypos	De eerste waarde is de horizontale positie, de tweede waarde is de verticale positie. Het linkerbovenhoek is 0 0. De eenheid kan pixels (0px 0px) of elke andere CSS-eenheid zijn. Als alleen één waarde wordt gespecificeerd, is de andere waarde 50%. Mixen % en posities is mogelijk.
x% y%	De eerste waarde is de horizontale positie, de tweede waarde is de verticale positie. Het linkerbovenhoek is 0% 0%. De rechteronderhoek is 100% 100%. Als alleen één waarde wordt gespecificeerd, is de andere waarde 50%. De standaardwaarde is: 50% 50%.
initial	Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit	Deze eigenschap erft van de ouder-element. Raadpleeg inherit.

Technische details

Standaardwaarde:	auto
Inheritantie:	Nee
Animatie maken:	Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie:	CSS3
JavaScript syntax:	object.style.offsetAnchor="bottom right"