CSS
Grandes lignes
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>
