Aperçu CSS
Le contour est en dehors de la limite de la bordure. Il ne participe pas au flux du document comme la bordure. Par conséquent, lorsque le contour apparaît ou disparaît, cela n'affectera pas le flux du document, c'est-à-dire qu'il ne provoquera pas la disparition du document. être réaffiché.
Un contour est une ligne tracée autour d'un élément, située à l'extérieur du bord de la bordure, qui permet de mettre en valeur l'élément.
Style de contour
Semblable à la bordure, le le contour est l'aspect le plus fondamental est le style, si un contour n'avait pas de style, le contour n'existerait pas du tout. Différent de la bordure, la valeur est un de moins caché
outline-style
Valeur : aucun | pointillé | double rainure |
Valeur initiale : aucune S'applique à : tous les éléments Héritage : aucun >Semblable aux bordures, la largeur du contour ne peut pas être négative ni être spécifiée sous forme de pourcentage. valeur
largeur du contour Valeurs : mince | moyen épais | <longueur> éléments Héritage : Aucun
[Note] Si le style de contour est aucun, la largeur du contour est calculée La valeur est 0
Couleur du contourDifférente de la bordure, la couleur du contour porte le mot-clé invert pour inverser le contour, ce qui signifie inverser complètement les pixels où se trouve le contour, afin que le contour soit visible dans différentes couleurs d'arrière-plan. Mais en fait, le mot-clé invert n'est pris en charge que par le navigateur IE. La couleur du contour des autres navigateurs est la couleur de premier plan de l'élément lui-même
outline-color
Valeur : <color> inverser | hériter
Valeur initiale : inverser (IE), couleur de premier plan (autres navigateurs)
S'applique à : tous les éléments Héritage : Aucun
Décalage du contour
Le décalage du contour est utilisé pour définir la valeur de la position de décalage du contour. Lorsque la valeur du paramètre est un nombre positif, cela signifie que le contour est décalé vers l'extérieur ; lorsque la valeur du paramètre est une valeur négative, cela signifie que le contour est décalé vers l'intérieur
[Remarque] Le navigateur IE ne prend pas en charge
outline -offset
Valeur : longueur | hériter
Valeur initiale : 0
S'applique à : tous les éléments
Héritage : Aucun
Abréviation du contour
Le contour du contour est similaire à l'attribut border du style de bordure, permettant de définir simultanément le style, la largeur et la couleur du contour. Étant donné qu’un contour donné doit adopter un style, une largeur et une couleur uniformes, le contour est la seule propriété abrégée des contours. Il n'y a pas d'attributs tels que outline-top ou outline-right pour le contour
[Remarque] le contour n'inclut pas le contour-offset, et le contour-offset doit être défini séparément
outline
Valeur : [<outline-color> || <outline-style> || <outline-width>] | hériter
Valeur initiale : Aucune
Appliqué à : Tous les éléments
Héritage : Aucun
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮廓案例</title>
<style>
p {border:1px solid yellow;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
</style>
</head>
<body>
<p class="dotted">点线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓</p>
<p class="ridge">垄状轮廓</p>
<p class="inset">嵌入轮廓</p>
<p class="outset">外凸轮廓</p>
</body>
</html>
