Differenza tra contorno e bordo

Qualcuno sa delle differenze tra le proprietà "border" e "outline" nei CSS? Se non c'è differenza, allora perché ci sono due proprietà per la stessa cosa?

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

La proprietà del contorno CSS è una proprietà confusa. Quando lo apprendi per la prima volta, è difficile capire come sia persino lontanamente diverso dalla proprietà border. Il W3C spiega che presenta le seguenti differenze:

1.Le linee non occupano spazio.

2. I contorni possono essere non rettangolari.

Oltre ad alcune altre risposte ... ecco alcune altre differenze che mi vengono in mente:

1) angoli arrotondati

bordersupporta gli angoli arrotondati con la border-radiusproprietà. outlinenon lo fa.

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>

VIOLINO

(NB: Sebbene Firefox abbia la -moz-outline-radiusproprietà che consente gli angoli arrotondati sul contorno ... questa proprietà non è definita in nessuno standard CSS e non è supportata da altri browser ( sorgente ))

2) Styling solo un lato

il bordo ha proprietà con cui modellare ciascun lato border-top:, border-left:ecc.

il contorno non può farlo. Non ci sono contorni: ecc. È tutto o niente. (vedi questo post SO )

3) offset

outline supporta l'offset con la proprietà outline-offset . il confine no.

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}

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

VIOLINO

Nota: tutti i principali browser supportano outline-offsettranne Internet Explorer

Oltre ad altre risposte, i contorni vengono generalmente utilizzati per il debug. Opera ha dei simpatici stili CSS utente che usano la proprietà outline per mostrarti dove sono tutti gli elementi in un documento.

Se stai cercando di scoprire perché un elemento non appare dove ti aspettavi o alla dimensione che ti aspettavi, aggiungi alcuni contorni e vedi dove sono gli elementi.

Come già accennato, i contorni non occupano spazio. Quando aggiungi un bordo, la larghezza / altezza totale dell'elemento nel documento aumenta, ma ciò non accade con il contorno. Inoltre non puoi impostare contorni su lati specifici come i bordi; è tutto o niente.

TLDR;

Il W3C spiega che presenta le seguenti differenze:

• I contorni non occupano spazio.
• I contorni possono essere non rettangolari.

fonte

Il profilo dovrebbe essere usato per l'accessibilità

Va anche notato che lo scopo principale del profilo è l'accessibilità. Impostandolo sul contorno: nessuno dovrebbe essere evitato.

Se è necessario rimuoverlo, potrebbe essere un'idea migliore fornire uno stile alternativo:

Ho visto alcuni suggerimenti su come rimuovere l'indicatore di messa a fuoco usando outline: none o outline: 0. Si prega di non farlo, a meno che non si sostituisca il contorno con qualcos'altro che renda facile vedere quale elemento ha il focus sulla tastiera. La rimozione dell'indicatore visivo del focus della tastiera farà sì che le persone che si affidano alla navigazione da tastiera abbiano difficoltà a navigare e utilizzare il tuo sito.

Fonte: "Non rimuovere la struttura dai controlli di collegamento e modulo", 365 Berea Street

Più risorse

• http://outlinenone.com/

Un uso pratico dei contorni riguarda la trasparenza. Se si dispone di un elemento padre con uno sfondo, ma si desidera che il bordo di un elemento figlio sia trasparente in modo che lo sfondo del genitore sia visibile, è necessario utilizzare "struttura" anziché "bordo". Mentre un bordo può essere trasparente, mostrerà lo sfondo del bambino, non quello del genitore.

In altre parole, questa impostazione ha creato il seguente effetto:

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

Dal sito della scuola W3

Le proprietà del bordo CSS consentono di specificare lo stile e il colore del bordo di un elemento.

Un contorno è una linea che viene disegnata attorno agli elementi (fuori dai bordi) per far "risaltare" l'elemento.

La proprietà stenografia del contorno imposta tutte le proprietà del contorno in una dichiarazione.

Le proprietà che possono essere impostate sono (in ordine): colore contorno, stile contorno, larghezza contorno.

Se manca uno dei valori sopra indicati, ad es. "Outline: solid # ff0000;", verrà inserito il valore predefinito per la proprietà mancante.

Controlla qui per maggiori informazioni: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Un po 'una vecchia domanda, ma vale la pena menzionare un bug di rendering di Firefox (ancora presente a partire da gennaio '13) in cui il contorno verrà visualizzato all'esterno di tutti gli elementi figlio anche se traboccano il loro genitore (attraverso margini negativi, ombreggiatura , eccetera.)

Puoi risolvere questo problema con:

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

Peccato che non sia stato ancora risolto. Preferisco di gran lunga i contorni in molti casi poiché non si aggiungono alle dimensioni di un elemento, evitando di dover considerare sempre la larghezza dei bordi quando si impostano le dimensioni di un elemento.

Dopo tutto, qual è più semplice?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

O:

.container {
    width: 954px;
    height: 294px;
    border: 3px solid black;
}

Vale anche la pena notare che la struttura del W3C è il confine di IE , poiché IE non implementa il modello di scatola W3C.

Nel modello di scatola w3c, il bordo è esclusivo della larghezza e dell'altezza dell'elemento. In IE è inclusivo.

Ho fatto un piccolo pezzo di codice css / html solo per vedere la differenza tra entrambi.

outlineè meglio includere potenziali elementi figlio traboccanti, specialmente in un contenitore in linea .

borderè molto più adattato agli elementi che si comportano in blocchi .

Vieni a suonare, signore!

La proprietà outline in CSS disegna una linea attorno all'esterno di un elemento. È simile al confine tranne che:

• Va sempre attorno a tutti i lati, non è possibile specificare particolari
• lati Non fa parte del modello di riquadro, quindi non influisce sulla
  posizione dell'elemento o degli elementi adiacenti

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

Come esempio pratico dell'uso di "outline", il debole bordo tratteggiato che segue il focus del sistema su una pagina Web (ad es. Se si passa attraverso i collegamenti) può essere controllato usando la proprietà outline (almeno, so che può farlo in Firefox , non provato altri browser).

Una tecnica comune di "sostituzione dell'immagine" è quella di utilizzare, ad esempio:

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

con quanto segue nel CSS:

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

Il problema è che quando lo stato attivo raggiunge il tag, il contorno si spegne di 1000em a sinistra. Il contorno può consentire di disattivare il contorno del fuoco su tali elementi.

Credo che anche la barra degli strumenti per sviluppatori di IE stia usando qualcosa come il contorno "sotto il cofano" quando si evidenziano gli elementi per l'ispezione in modalità "seleziona". Ciò dimostra bene che il "contorno" non occupa spazio.

pensa al contorno come a un bordo che un proiettore disegna fuori da qualcosa come un bordo è un vero oggetto attorno a quella cosa.
una proiezione può facilmente sovrapporsi ma il bordo non ti lascia passare.
alcune volte quando lo uso grid+%width, border modifica il ridimensionamento sulla porta di visualizzazione, ad esempio un div con width:100%in un genitore width:100pxriempie completamente il genitore, ma quando aggiungo border:solid 5pxa div lo rende più piccolo per fare spazio al bordo (anche se è raro e aggirabile!)
ma con lo schema non ha questo problema poiché lo schema è più virtuale: D è solo una linea all'esterno dell'elemento ma il problema è che se non si esegue la spaziatura correttamente si sovrappone ad altri contenuti.

per farla breve:
delineare i professionisti:
non si scherza con la spaziatura e le posizioni
contro:
alte possibilità di sovrapposizione

Differenze tra bordo e contorno:

Il bordo fa parte del modello di riquadro, quindi viene conteggiato rispetto alle dimensioni dell'elemento. Il contorno non fa parte del modello a scatola quindi non influisce sugli elementi vicini.

demo:

#border {
  border: 10px solid black;
}
#outline {
  outline: 10px solid black;
}

<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>

Copiato da W3Schools:

Definizione e utilizzo

Un contorno è una linea che viene disegnata attorno agli elementi (al di fuori dei bordi) per far "risaltare" l'elemento.