A outline-offsetpropriedade em CSS desloca um contorno definido da borda da borda de um elemento em um valor especificado. Um contorno, que é diferente de uma borda, não ocupa nenhum espaço na página (como um elemento posicionado absolutamente), portanto, o contorno pode ser deslocado em qualquer quantidade e não afetará a posição ou o layout dos elementos circundantes.
.example ( outline: solid 2px blue; outline-offset: 10px; )Contornos definidos usando a outlinepropriedade são freqüentemente usados como anéis de foco, para acessibilidade. Assim, a outline-offsetpropriedade permite que você altere a posição do anel de foco.
Valores
outline-offset aceita um tipo de valor, um comprimento, que pode ser:
0(o padrão)- Qualquer outro comprimento válido com uma unidade especificada (incluindo valores negativos)
Observe que outline-offset, assim outline-width, não aceita valores percentuais.
Posicionamento do Contorno
Por padrão, o contorno de um elemento é desenhado imediatamente fora da borda (ou imediatamente fora de onde a borda seria desenhada se uma borda fosse definida). Portanto, é tecnicamente possível combinar contorno e borda para um efeito de duas bordas:
A partir daí, outline-offsetpode ser usado para alterar a posição do contorno em relação à borda da borda. Experimente a demonstração abaixo, que permite alterar interativamente o valor de deslocamento do contorno usando o controle deslizante. O valor do deslocamento é exibido na página conforme você move o controle deslizante:
Conforme mencionado acima, outline-offsetaceita valores negativos, que irão deslocar o contorno na direção oposta (em direção ao centro do elemento), conforme mostrado na próxima demonstração interativa. Observe que o esboço começa em -40px:
Se você visualizar a demonstração acima no Firefox, notará que o contorno parece correto no início, mas quando o controle deslizante é ajustado, o contorno não é renderizado suavemente e acaba na posição errada. Rolar o elemento para fora da vista e, em seguida, de volta à vista, força o navegador a redesenhar o contorno na posição correta. Este parece ser um bug exclusivo do Firefox.
Não faz parte da outlinetaquigrafia
Semelhante à borderpropriedade, a outlinepropriedade é um atalho que representa três propriedades: outline-color, outline-style, e outline-width.
A outline-offsetpropriedade, portanto, não é representada nesta ou em qualquer outra propriedade abreviada, portanto, precisa ser declarada separadamente do próprio contorno definido.
Relacionado
- contorno
- fronteira
Mais Informações
- contorno-deslocamento em W3C
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3,1 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2,1 | 3,2 |
O indicador “parcial” para o IE significa que o IE não oferece suporte outline-offset, mas suporta outlineabreviatura e as três propriedades que ele representa.
Além do bug mencionado acima na seção “Posicionamento do contorno”, há um bug no Firefox em que o contorno é desenhado incorretamente se o elemento tiver um elemento filho que ultrapassa o limite pai (por exemplo, usando margens negativas ou posicionamento absoluto) . Portanto, o outline-offsetvalor será relativo ao limite estendido criado pelo filho transbordando, em vez dos limites do elemento pai original. Para entender isso melhor, consulte este CodePen, este thread Stack Overflow e este relatório de bug (crédito ao leitor Matt Vanes por enviar este bug).