Maison >interface Web >tutoriel CSS >Comment puis-je augmenter l'espacement entre les points dans une bordure HTML en pointillés ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-11-24 16:55:14442parcourir

How Can I Increase the Spacing Between Dots in a Dotted HTML Border?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn