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
Libérer: 2024-11-24 16:55:14
original
414 Les gens l'ont consulté

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;
Copier après la connexion

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;
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal