Recherche…


Syntaxe

  • contour: contour contour couleur | initiale | hériter;
  • largeur du contour: moyen | mince | épais | longueur | initiale | hériter;
  • style de contour: aucun | caché | pointillé | en pointillés | solide | double | rainure | crête | encart | début | initiale | hériter;

Paramètres

Paramètre Détails
pointé contour en pointillé
en pointillés contour en pointillés
solide contour solide
double double contour
rainure Contour 3D rainuré, dépend de la valeur de la couleur du contour
crête Contour 3D strié, dépend de la valeur de la couleur du contour
encart Contour en 3D, dépend de la valeur de la couleur du contour
début Contour des 3D, dépend de la valeur de la couleur du contour
aucun pas de contour
caché contour caché

Remarques

outline sont maintenant décrites dans Basic UI , un module CSS de niveau 3 (il était déjà décrit dans REC CSS2.1)


La propriété Outline est définie par défaut dans les navigateurs pour les éléments pouvant être :focus dans :focus état de :focus .
Il ne devrait pas être supprimé, voir http://outlinenone.com qui indique:

Que fait la propriété contour?

Il fournit un retour visuel pour les liens qui ont "focus" lors de la navigation dans un document Web à l'aide de la touche TAB (ou équivalente). Ceci est particulièrement utile pour les personnes qui ne peuvent pas utiliser une souris ou qui ont une déficience visuelle. Si vous supprimez le contour, vous rendrez votre site inaccessible pour ces personnes. (…)

Exemples intéressants sur le débordement de pile:

Vue d'ensemble

Le contour est une ligne qui contourne l'élément, en dehors de la bordure. Contrairement aux border , les contours ne prennent aucune place dans le modèle de boîte. L'ajout d'un contour à un élément n'affecte donc pas la position de l'élément ou d'autres éléments.

De plus, les contours peuvent être non rectangulaires dans certains navigateurs. Cela peut se produire si le outline est appliqué à un élément span contenant du texte avec des propriétés de font-size différentes. Contrairement aux bordures, les contours ne peuvent pas avoir de coins arrondis.

Les parties essentielles du outline sont la outline-color outline-style , le outline-style outline-width .

La définition d'un contour est équivalente à la définition d'une bordure:

Un contour est une ligne autour d'un élément. Il est affiché autour de la marge de l'élément. Cependant, il est différent de la propriété frontière.

outline: 1px solid black;

style de contour

La propriété de outline-style est utilisée pour définir le style du contour d'un élément.

p {
  border: 1px solid black;
  outline-color:blue;
  line-height:30px;
}
.p1{
  outline-style: dotted;
}
.p2{
  outline-style: dashed;
}
.p3{
  outline-style: solid;
}
.p4{
  outline-style: double;
}
.p5{
  outline-style: groove;
}
.p6{
  outline-style: ridge;
}
.p7{
  outline-style: inset;
}
.p8{
  outline-style: outset;
}

HTML

<p class="p1">A dotted outline</p>
<p class="p2">A dashed outline</p>
<p class="p3">A solid outline</p>
<p class="p4">A double outline</p>
<p class="p5">A groove outline</p>
<p class="p6">A ridge outline</p>
<p class="p7">An inset outline</p>
<p class="p8">An outset outline</p>

entrer la description de l'image ici



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow