Maison > Article > interface Web > Comment spécifier des doubles bordures en utilisant CSS ?

Comment spécifier des doubles bordures en utilisant CSS ?

WBOYavant: 2023-09-05 22:45:05919parcourir

Nous savons que CSS est un langage de feuille de style basé sur des règles utilisé pour concevoir et personnaliser des pages Web. Ils sont utilisés pour spécifier comment les éléments HTML sont formatés et affichés à l'écran. Un style que nous utilisons souvent consiste à ajouter ou modifier la bordure d’un élément. Ceci peut être réalisé en utilisant la « propriété border » CSS.

Propriétés frontalières

"Bordure" est une manière abrégée de spécifier une bordure autour d'un élément, en spécifiant la largeur, le style et la couleur de la bordure. Par conséquent, nous pouvons dire que la propriété frontière se compose en réalité des trois propriétés suivantes.

Border Color - Il définit la couleur de la bordure et revient à la couleur actuelle si elle n'est pas présente.
Border-style - Il spécifie le style de bordure utilisé, revenant à aucun s'il n'existe pas.
Border-width - Ceci détermine l'épaisseur de la bordure, la valeur par défaut est "moyenne"

Nous pouvons également spécifier individuellement la largeur, le style et la couleur de chaque côté de la bordure. Notez qu'il ne s'agit pas d'une propriété héritable, ce qui signifie que si l'élément conteneur est entouré d'une bordure, les éléments enfants n'auront pas de bordure sauf indication contraire.

Nous pouvons spécifier la bordure en utilisant une, deux ou les trois propriétés. Toute valeur que nous ne spécifions pas aura sa valeur par défaut/initiale comme valeur.

Exemple

Un exemple de bordure utilisant les trois propriétés est donné ci-dessous.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Border and its styling</title>
   <style>
      div {
         width: 100%;
         height: 200px;
         align-content: center;
         justify-content: center;
      }
      #box1 {
         background-color: antiquewhite;
         border: 2px solid black;
      }
      #box2 {
         background-color: aquamarine;
         border: dashed blue;
      }
      #box3 {
         background-color: blanchedalmond;
         border: red;
      }
      #box4 {
         background-color: beige;
         border: 1px rebeccapurple;
      }
   </style>
</head>
<body>
   <div id="box1">Black 2px solid border</div>
   <div id="box2">Blue dashed border</div>
   <div id="box3">No visible border</div>
   <div id="box4">No visible border</div>
</body>
</html>

Nous pouvons voir que chaque style a un effet différent sur la bordure de l'élément.

Spécifiez les doubles bordures

Maintenant que nous avons compris les bases de l'utilisation de la propriété border en CSS, nous allons commencer à résoudre la question "Comment spécifier une double bordure en utilisant CSS". Jetons un bref aperçu de ce qu'est la propriété de style frontière, de ce que vous pouvez en faire et comment l'utiliser pour résoudre notre problème.

Spécifiez les attributs à double bordure

Nous avons expliqué ci-dessus que l'attribut border-style contrôle le style de bordure appliqué à un élément en CSS. L'attribut border-style est utilisé pour contrôler la manière dont les bordures sont affichées sur les pages Web. Il s'agit également d'une propriété abrégée, composée des propriétés de style bottom, left, right et top.

Nous pouvons spécifier l'attribut border-style en utilisant une, deux, trois ou les quatre valeurs.

Si on n'utilise qu'une seule valeur, cette propriété a pour effet d'appliquer le même style à toutes les lignes de bordure.
Lorsque nous utilisons deux valeurs, le premier style sera appliqué en haut et en bas de la bordure, tandis que le second style sera appliqué aux parties gauche et droite de la bordure.
李>
Lors de la spécification de trois valeurs, le premier style sera appliqué en haut, le deuxième style sera appliqué aux parties gauche et droite et le dernier style sera appliqué en bas.
Si nous spécifions les quatre valeurs, l'ordre dans lequel les styles sont appliqués sera en haut, à droite, en bas et à gauche (c'est-à-dire dans le sens des aiguilles d'une montre à partir du haut).

Voyons maintenant quelles valeurs possibles nous pouvons donner à cette propriété.

Non
Masquer
point-like
Ligne pointillée
Solide
Double
Groove
Crête
insérer
Outset
Starting Point

Après avoir examiné ces valeurs, nous pouvons voir qu'en utilisant "double" comme valeur de la propriété border-style, nous pouvons obtenir l'effet d'une double bordure.

Exemple

Vous trouverez ci-dessous un exemple de spécification d'une double bordure à l'aide de l'attribut border-style.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: beige;
         text-align: center;
      }
      h1.doubleApplied {
         border-width: 5px;
         border-style: double;
         Border-color: blue;
      }
      h1.double2Applied {
         border-width: 15px;
         border-style: double;
         Border-color: blue;
      }
      h1.double3Applied {
         border-width: 20px;
         border-style: double;
         Border-color: blue
      }
   </style>
</head>
<body>
   <h1 class="doubleApplied">This has double styled border with thinnest border</h1>
   <h1 class="double2Applied">This has double styled border applied with slightly thick border than previous box.</h1>
   <h1 class="double3Applied">This has double styled border applied with the thickest border</h1>
</body>
</html>

Nous pouvons voir qu'en utilisant double comme valeur, tous les éléments sont entourés d'une double bordure d'épaisseur variable.

Conclusion

En résumé, spécifier des bordures doubles à l'aide de CSS est une tâche simple. Il vous suffit d'utiliser l'attribut border-style et de le définir sur double. Cela tracera deux lignes de chaque côté de l’élément, donnant à votre page un look unique et élégant. De plus, vous pouvez utiliser d'autres propriétés telles que « border-width » et « border-color » pour personnaliser la couleur, la taille et d'autres propriétés de ces bordures. Avec de la pratique, vous serez bientôt en mesure de créer de superbes designs avec des bordures.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment afficher le format de fichier lié en utilisant CSS ?Article suivant：Comment afficher le format de fichier lié en utilisant CSS ?

Articles Liés

Voir plus