CSS propriedade offset-distance
- Página anterior offset-anchor
- Próxima página offset-path
Definição e uso
offset-distance
A propriedade é usada para definir a distância do elemento em relação ao caminho definido por: offset-path
Distância entre os pontos de partida dos caminhos definidos pela propriedade.
Exemplo
O elemento <img> é colocado no caminho definido, na posição 33% do ponto de partida do caminho.
img { offset-path: path('M 50 80 C 150 -20 250 180 350 80'); offset-distance: 33%; }
Sintaxe do CSS
offset-distance: auto|length|initial|inherit;
Valor da propriedade
Valor | Descrição |
---|---|
0 | O elemento é colocado no ponto de partida do caminho. Valor padrão. |
length |
Use unidades fixas (como px, pt, cm, etc.) para especificar a distância do elemento ao ponto de partida do caminho. Não são permitidos valores negativos. Veja:Unidades CSS. |
% | Especifique a distância em porcentagem em relação ao comprimento do caminho. |
initial | Defina essa propriedade como seu valor padrão. Veja: initial. |
inherit | Herda essa propriedade do elemento pai. Veja: inherit. |
Detalhes técnicos
Valor padrão: | 0 |
---|---|
Herança: | Não |
Produção de animação: | Suportado. Veja:Propriedades relacionadas a animação. |
Versão: | CSS3 |
Sintaxe do JavaScript: | object.style.offsetDistance="200px" |
Suporte do navegador
Os números na tabela representam a versão do navegador que suportou completamente essa propriedade pela primeira vez.
Chrome | Edge | Firefox | Safari | Ópera |
---|---|---|---|---|
55 | 79 | 72 | 16 | 42 |
Páginas relacionadas
Tutorial:Caminho SVG
Tutorial:Animação CSS
Referência:CSS propriedade offset
Referência:CSS propriedade offset-anchor
Referência:CSS propriedade offset-path
Referência:CSS propriedade offset-position
Referência:CSS propriedade offset-rotate
- Página anterior offset-anchor
- Próxima página offset-path