CSS propriedade offset-distance

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%;
}

Experimente você mesmo

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