Comment utiliser CSS pour générer des lignes pointillées contrôlables

Objectif :

Générer une ligne pointillée comme indiqué ci-dessous

Méthode de mise en œuvre

Méthode de mise en œuvre, certaines personnes utilisent plusieurs travées pour générer, un petit point est une travée, c'est OK, mais le changement d'état dans son ensemble est plus gênant, existe-t-il un moyen de générer un Ligne pointillée contrôlable ? Tissu en laine ?

(Tutoriel vidéo recommandé : Tutoriel vidéo CSS)

Générer des pointillés

Générer une ligne horizontale

Générer des lignes pointillées pointillées, qui sont généralement implémentées via Linear-gradient + background-size Le code d'implémentation est le suivant :

height: 2px;
background: linear-gradient(to right, #000000, #000000 7.5px, transparent 7.5px, transparent);
background-size: 15px 100%;

height, contrôle la hauteur de la ligne pointillée, linéaire-. gradient et background-size contrôlent l'espacement Et la taille du pas

génère des lignes verticales

Les lignes verticales sont exactement l'opposé des lignes horizontales, il suffit de les inverser.

width: 2px;
background: linear-gradient(to bottom, #000000, #000000 7.5px, transparent 7.5px, transparent);
background-size: 100% 15px;

Tutoriel recommandé : Démarrage rapide CSS

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!