Pourquoi ma bordure n'est-elle pas rouge ? Dépannage des problèmes de bordure CSS

Dépannage de la couleur de la bordure : pourquoi elle n'est pas rouge

Lors de l'ajout d'une bordure à un élément, il est courant de rencontrer des situations où la couleur spécifiée n’est pas appliqué. Voici comment résoudre ce problème avec CSS :

Considérez l'extrait de code suivant :

<div>

Comme démontré dans ce JSFiddle (http://jsfiddle.net/zeburrehman/aFzKy/151/ ), la bordure autour de l'élément DIV reste invisible, malgré la spécification de la couleur de la bordure comme rouge.

Comprendre le problème

Par défaut, le navigateur définit respectivement la largeur de la bordure et le style de la bordure sur zéro et « aucun ». Cela signifie que même si une couleur de bordure est définie, il n'y a aucune bordure visible sur laquelle l'afficher.

Solution

Pour rendre la bordure visible et appliquer la couleur souhaitée, vous devez définir explicitement les propriétés border-width et border-style. La largeur de la bordure détermine l'épaisseur de la bordure, tandis que le style de la bordure détermine son apparence (par exemple, solide, pointillé).

Le moyen le plus efficace d'y parvenir est de combiner les trois propriétés de bordure en une seule. déclaration :

#box {
    border: 1px solid red;
}

En définissant border-width sur 1px et border-style sur solid, vous définissez une bordure solide de 1 pixel de large autour de l'élément et spécifiez sa couleur comme rouge. Cette notation condensée combine les trois propriétés de bordure individuelles en une seule ligne pour plus de simplicité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!