Différence entre le contour et la bordure

En plus de quelques autres réponses... voici encore quelques différences auxquelles je peux penser:

1) coins arrondis

border supporte les coins arrondis avec la propriété border-radius . Pas outline .

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>

VIOLON

(NB: bien que firefox a la propriété -moz-outline-radius qui permet des coins arrondis sur le contour... cette propriété, il n'est pas défini dans aucune norme CSS, et n'est pas pris en charge par d'autres navigateurs ( source )

2 )Style un seul côté

border a des propriétés de style de chaque côté avec border-top: , border-left: etc.

ne peut pas faire ça. Il n'y a pas de plan-dessus: etc. C'est tout ou rien. (voir ce tant de poster )

3) "décalage de 1519140920"

plan prend en charge décalage avec la propriété plan-offset . pas border.

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

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

VIOLON

Note: Tous les principaux navigateurs prennent en charge outline-offset sauf Internet Explorer

suite à d'autres réponses, les contours sont généralement utilisés pour le débogage. Opera a de beaux styles d'utilisateur CSS qui utilisent la propriété outline pour vous montrer où tous les éléments se trouvent dans un document.

si vous essayez de savoir pourquoi un élément n'apparaît pas là où vous l'attendiez ou à la taille que vous attendiez, ajoutez quelques contours et voyez où sont les éléments.

comme déjà mentionné, les contours ne prennent pas de place. Lorsque vous ajoutez une bordure, la la largeur/hauteur totale de l'élément dans le document augmente, mais cela n'arrive pas avec le contour. Aussi, vous ne pouvez pas définir des contours sur des côtés spécifiques comme les frontières; c'est tout ou rien.

tldr;

le W3C explique qu'il présente les différences suivantes:

• les contours ne prennent pas de place.
• les contours peuvent ne pas être rectangulaires.

Source

les contours doivent être utilisés pour l'accessibilité

il est également à noter que le but principal de la présentation est l'accessibilité. Le paramètre outline: none doit être évitée.

si vous devez l'enlever il peut-être une meilleure idée de fournir un style alternatif:

j'ai vu pas mal de conseils sur la façon de supprimer l'indicateur de mise au point en utilisant outline:none ou outline:0. S'il vous plaît, ne faites pas cela, sauf si vous remplacez le contour par quelque chose d'autre qui rend facile de voir quel élément a la mise au point du clavier. La suppression de l'indicateur visuel du focus du clavier donnera aux personnes qui comptent sur navigation sur le clavier la navigation et l'utilisation de votre site sont très difficiles.

Source: "Ne Pas Supprimer le Contour de Lien et les Contrôles de Formulaire", 365 Berea Rue

Plus De Ressources

• http://outlinenone.com /

une utilisation pratique du schéma traite de la transparence. Si vous avez un élément parent avec un arrière-plan, mais que vous voulez que la bordure d'un élément enfant soit transparente afin que l'arrière-plan du parent apparaisse, vous devez utiliser "contour" plutôt que "border"."Bien qu'une bordure puisse être transparente, elle indiquera les antécédents de l'enfant et non ceux du parent.

en d'autres termes, ce paramètre a créé l'effet suivant:

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

Du Site De L'École W3

les propriétés CSS border vous permettent de spécifier le style et la couleur de la bordure d'un élément.

Un plan est une ligne qui est tracée autour des éléments (à l'extérieur des frontières) pour faire de l'élément "se démarquer".

la propriété outline shorthand définit toutes les propriétés outline en une seule déclaration.

Les propriétés qui peuvent être ensemble, sont (dans l'ordre): le contour la couleur, le contour de style, les grandes lignes de largeur.

si l'une des valeurs ci-dessus est manquante, par exemple" contour:solid #ff0000;", la valeur par défaut pour la propriété manquante sera insérée, le cas échéant.

Cliquez ici pour plus d'informations : http://webdesign.about.com/od/advancedcss/a/outline_style.htm

un peu d'une vieille question, mais qui vaut la peine de mentionner un bug de rendu de Firefox (toujours présent à partir de Jan '13) où le contour rendra sur l'extérieur de tous les éléments enfant même si elles débordent leur parent (par des marges négatives, boîte-ombres, etc.)

vous pouvez corriger cela avec:

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

très regrettable qu'il ne soit toujours pas réparé. Je préfère les grandes lignes dans de nombreux cas car elles n'ajoutent pas aux dimensions d'un élément, vous éviter d'avoir toujours à tenir compte des largeurs de bordure lors de la configuration des dimensions d'un élément.

après tout, qu'est-ce qui est plus simple?

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

ou:

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

Il est également intéressant de noter que les normes du W3C plan est IE frontière , depuis IE ne pas mettre en œuvre W3C modèle de boîte.

dans le modèle de boîtier w3c, le bord est exclu de la largeur et de la hauteur de l'élément. Dans IE, il est inclus.

j'ai fait un petit morceau de code CSS/html juste pour voir la différence entre les deux.

outline est mieux inclose potentiel de débordement des éléments d'enfant, surtout dans un inline conteneur.

border est beaucoup plus adapté pour bloc - éléments de comportement.

jouer du Violon pour vous monsieur!

la propriété outline dans CSS trace une ligne autour de l'extérieur d'un élément. C'est similaire à border sauf que:

• il va toujours autour de tous les côtés, vous ne pouvez pas spécifier particulier
• côtés ce n'est pas une partie du modèle de la boîte, donc il ne sera pas l'effet de la
  
  position de l'élément ou des éléments adjacents

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

comme exemple pratique de l'utilisation de" contour", la bordure en pointillé qui suit le système focus sur une page Web (par ex. si vous Onglet à travers les liens) peut être contrôlée en utilisant la propriété outline (au moins, je sais qu'il peut dans Firefox, pas essayé d'autres navigateurs).

une technique courante de "remplacement d'image" consiste à utiliser, par exemple:

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

avec ce qui suit dans la CSS:

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

le problème étant que lorsque la mise au point atteint la balise, le contour se détache 1000em vers la gauche. Outline peut vous permettre d'éteindre le focus outline sur de tels éléments.

je crois que la barre D'outils du développeur IE utilise aussi quelque chose comme le contour" sous le capot "quand on met en évidence des éléments pour l'inspection en mode" select". Cela montre bien le fait que le "plan" prend pas de place.

pensez à un contour comme une bordure qu'un projecteur dessine en dehors de quelque chose comme une bordure est un objet réel autour de cette chose.

une projection peut facilement se chevaucher mais border ne vous laisse pas passer.

quelques fois quand j'utilise grid+%width , border va changer l'échelle sur le port de vue,par exemple un div avec width:100% dans un parent avec width:100px remplit le parent complètement, mais quand j'ajoute border:solid 5px pour div il faire le div plus petit pour faire espace pour la frontière (bien que ce soit rare et travail-aroundable!)

mais avec le contour il n'a pas ce problème car le contour est plus virtuel :D c'est juste une ligne en dehors de l'élément mais le problème est que si vous ne faites pas l'espacement correctement, il se chevaucherait avec d'autres contenus.

pour faire court:

sommaire pros:

il ne touche pas à l'espacement et aux positions

contre:

risque élevé de chevauchement

copié de W3Schools:

définition et Usage

un contour est une ligne tracée autour des éléments (en dehors des frontières) pour faire de l'élément "se démarquer".