Comment puis-je contrôler l'espacement des points dans les bordures CSS en pointillés ?

Contrôle de l'espacement des points dans les bordures en pointillés

Pour augmenter l'espace entre les points dans une bordure en pointillé, pensez à utiliser une technique de dégradé. Cette méthode s'applique aux bordures horizontales et verticales.

Bordures horizontales :

• Définissez l'image d'arrière-plan sur un dégradé linéaire avec une valeur en pourcentage spécifiant la proportion de la ligne occupée par des points, suivie de 0 % pour la transparence.
• Ajustez la taille de l'arrière-plan pour contrôler la taille du point et la position de l'arrière-plan pour placer le dégradé en bas de la bordure.

Bordures verticales :

• Utilisez la même technique de dégradé linéaire que ci-dessus, mais changez la position de l'arrière-plan en "droite". ."

Exemple Code :

/* Horizontal */
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;

/* Vertical */
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 dans le dégradé linéaire, vous pouvez contrôler le rapport entre les points et l'espacement. La propriété background-size détermine la taille du point.

Remarque : Cette technique permet de créer plusieurs bordures en pointillés en utilisant plusieurs images d'arrière-plan.

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!