Comment puis-je augmenter l'espacement entre les points dans une bordure HTML en pointillés ?

Augmentation de l'espacement entre les points de bordure en pointillés

En HTML et CSS, la bordure de style pointillé ajoute une ligne de points uniformément espacés autour du bord d'un élément. Pour augmenter l'espacement entre ces points, vous pouvez utiliser une technique utilisant des dégradés linéaires et des images d'arrière-plan :

La stratégie consiste à créer un dégradé avec une couleur unique et une couleur transparente. Le pourcentage du dégradé détermine la taille des points et la propriété background-size contrôle l'espacement entre eux.

Pour les bordures horizontales en pointillés :

background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

Pour les bordures verticales en pointillés :

background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

En ajustant les pourcentages de taille d'arrière-plan et de dégradé linéaire, vous pouvez contrôler la taille et l'espacement des points pour créer une bordure en pointillé personnalisée qui correspond à votre conception. exigences.

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!