Comment puis-je personnaliser la longueur et l'espacement des traits de bordure en pointillés en CSS ?

Personnalisation de la longueur et de l'espacement des traits de bordure en pointillés en CSS

Limitations de la propriété de bordure native

La propriété de bordure native de CSS offre un contrôle limité sur les bordures en pointillés, manquant la possibilité d'ajuster la longueur et l'espacement des traits.

Présentation border-image

Pour gagner en flexibilité, exploitez la puissance de la propriété border-image. Cette technique simule des bordures en pointillés à l'aide d'images, offrant un contrôle précis de leur apparence.

Guide étape par étape

1. Créer l'image : Concevoir et exporter une image représentant le motif de trait souhaité. Assurer la transparence pour permettre l’affichage en arrière-plan. Ajustez les largeurs et les espaces dans l'image pour contrôler les propriétés du trait.

2. Configuration CSS :

   • Définir la source de l'image de la bordure : Spécifiez l'URL de l'image créée à l'étape 1.
   • Facultatif : border-image-width : Définissez la largeur de la bordure en pixels, en pourcentage ou en multiple de la largeur du trait (par défaut : 1).
   • Définissez border-image-slice : Définissez l'épaisseur des quatre côtés de l'image utilisée comme bordure.
   • Définissez border-image-repeat : Spécifiez comment l'image est répétée (par exemple, arrondir, répéter).

Exemple complet

.bordered {
  border: dashed 4px #000; /* Fallback for non-supporting browsers */
  border-style: dashed;
  border-image: url("https://i.sstatic.net/wLdVc.png") 2 round;
}

Contrôle des espaces et de la longueur du trait

Pour modifier les espaces et la longueur des traits, modifiez simplement l'image dans Photoshop ou un outil similaire et ajustez la largeur des espaces et des traits à l'intérieur. Pour des espaces plus larges, créez une image où les espaces sont plus grands.

Compatibilité des navigateurs

border-image est bien pris en charge dans les navigateurs modernes (IE 11 et versions ultérieures), offrant une apparence cohérente dans tous les navigateurs. .

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!