css tag Diferença entre contorno e fronteira



id vs class js (11)

Alguém sabe de alguma diferença entre as propriedades 'border' e 'outline' no CSS? Se não há diferença, então por que existem duas propriedades para a mesma coisa?


tldr;

O W3C explica como tendo as seguintes diferenças:

  • Contornos não ocupam espaço.
  • Contornos podem ser não-retangulares.

http://webdesign.about.com/od/advancedcss/a/outline_style.htm

O esboço deve ser usado para acessibilidade

Também deve ser notado que o objetivo principal do esboço é a acessibilidade. Definindo-o para delinear: nenhum deve ser evitado.

Se você precisar removê-lo, talvez seja melhor fornecer um estilo alternativo:

Eu vi algumas dicas sobre como remover o indicador de foco usando o contorno: nenhum ou estrutura de tópicos: 0. Por favor, não faça isso, a menos que você substitua o contorno por algo mais que facilite ver qual elemento tem o foco do teclado. Remover o indicador visual do foco do teclado dará às pessoas que dependem da navegação pelo teclado um tempo muito difícil para navegar e usar seu site.

Fonte: "Não remova a estrutura de tópicos dos controles de link e formulário", 365 Berea Street

Mais recursos


Como um exemplo prático de usar "contorno", a borda pontilhada que segue o foco do sistema em uma página da Web (por exemplo, se você navegar pelos links) pode ser controlada usando a propriedade de contorno (pelo menos, sei que pode no Firefox , não tentei outros navegadores).

Uma técnica comum de "substituição de imagem" é usar, por exemplo:

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

com o seguinte no CSS:

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

O problema é que, quando o foco alcança a tag, o contorno se aproxima de 1000em para a esquerda. O contorno pode permitir que você desative o contorno do foco em tais elementos.

Eu acredito que o IE Developer Toolbar também está usando algo como "sob o capô" ao realçar elementos para inspeção no modo "select". Isso mostra bem o fato de que "esboço" não ocupa espaço.


A propriedade de contorno no CSS desenha uma linha ao redor do lado externo de um elemento. É semelhante a fronteira, exceto que:

  • Ele sempre anda por todos os lados, você não pode especificar
  • lados Não é uma parte do modelo de caixa, por isso não afetará o
    posição do elemento ou elementos adjacentes

Fonte: https://css-tricks.com/almanac/properties/o/outline/


Um uso prático do esboço trata da transparência. Se você tiver um elemento pai com um plano de fundo, mas quiser que a borda do elemento filho seja transparente para que o plano de fundo do pai seja exibido, será necessário usar "contorno" em vez de "borda". Embora uma borda possa ser transparente, ela mostrará o histórico da criança, não a dos pais.

Em outras palavras, essa configuração criou o seguinte efeito:

outline: 7px solid rgba(255, 255, 255, 0.2);


De: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

A propriedade de estrutura de tópicos do CSS é uma propriedade confusa. Quando você aprende sobre isso, é difícil entender como é mesmo remotamente diferente da propriedade border. O W3C explica como tendo as seguintes diferenças:

1.Outlines não ocupam espaço.

2.Outlines pode ser não-retangular.


Do site da escola W3

As propriedades da borda CSS permitem que você especifique o estilo e a cor da borda de um elemento.

Um esboço é uma linha desenhada em torno de elementos (fora das bordas) para fazer com que o elemento "se destaque".

A propriedade abreviada de estrutura de tópicos define todas as propriedades de estrutura de tópicos em uma declaração.

As propriedades que podem ser definidas são (em ordem): cor de contorno, estilo de contorno, largura de contorno.

Se um dos valores acima estiver faltando, por exemplo, "outline: solid # ff0000;", o valor padrão para a propriedade ausente será inserido, se houver.

Confira aqui para mais informações: http://webdesign.about.com/od/advancedcss/a/outline_style.htm


Eu fiz um pequeno pedaço de código css / html apenas para ver a diferença entre ambos.

outline é melhor para incluir potenciais elementos filho transbordando, especialmente em um contêiner in - line .

border é muito mais adaptada para elementos que se comportam em bloco .

Violino para você senhor!


É importante notar também, que o esboço do W3C é a fronteira do IE, uma vez que o IE não implementa o modelo de caixa do W3C.

No modelo de caixa w3c, a borda é exclusiva da largura e altura do elemento. No IE, é inclusivo.


Além de algumas outras respostas ... aqui estão mais algumas diferenças que eu posso pensar:

1) cantos arredondados

border suporta cantos arredondados com a propriedade border-radius . outline não.

div {
  width: 150px;
  height: 150px;
  margin: 20px;
  display: inline-block;
  position: relative;
}

.border {
  border-radius: 75px;
  border: 2px solid green;
}

.outline {
  outline: 2px solid red;
  border-radius: 75px;
  -moz-outline-radius: 75px;
  outline-radius: 75px;
}

.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);

}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}
<div class="border"></div>

<div class="outline"></div>

FIDDLE

(Nota: Embora o firefox tenha a -moz-outline-radius que permite cantos arredondados no contorno ... essa propriedade não é definida em nenhum padrão CSS e não é suportada por outros navegadores ( source ))

2) Styling apenas um lado

border tem propriedades para estilizar cada lado com border-top: border-left: etc.

esboço não pode fazer isso. Não há topo de tópicos: etc. É tudo ou nada. (veja esta postagem SO )

3) compensado

contorno suporta offset com o outline-offset propriedades. fronteira não.

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}
<div class="outline"></div>

FIDDLE

Nota: Todos os principais navegadores suportam outline-offset exceto o Internet Explorer


Além de outras respostas, os contornos geralmente são usados ​​para depuração. O Opera tem alguns estilos CSS de usuário que usam a propriedade outline para mostrar onde todos os elementos estão em um documento.

Se você estiver tentando descobrir por que um elemento não está aparecendo onde você esperava ou no tamanho esperado, adicione alguns esboços e veja onde estão os elementos.

Como já mencionado, os esboços não ocupam espaço. Quando você adiciona uma borda, a largura / altura total do elemento no documento aumenta, mas isso não acontece com o contorno. Além disso, você não pode definir contornos em lados específicos, como bordas; é tudo ou nada.


Copiado do W3Schools:

Definição e Uso

Um esboço é uma linha desenhada em torno de elementos (fora das bordas) para fazer com que o elemento "se destaque".





css