Wie kann ich den Abstand von Punkten in gepunkteten CSS-Rändern steuern?

Punktabstände in gepunkteten Rändern steuern

Um den Abstand zwischen Punkten in einem gepunkteten Rahmen zu vergrößern, sollten Sie die Verwendung einer Verlaufstechnik in Betracht ziehen. Diese Methode gilt sowohl für horizontale als auch für vertikale Ränder.

Horizontale Ränder:

• Hintergrundbild auf einen linearen Farbverlauf mit einem Prozentwert festlegen, der den Anteil angibt die von Punkten besetzte Linie, gefolgt von 0 % für Transparenz.
• Passen Sie die Hintergrundgröße an, um die Punktgröße zu steuern, und die Hintergrundposition, um den Farbverlauf zu platzieren am unteren Rand des Randes.

Vertikale Ränder:

• Verwenden Sie die gleiche lineare Verlaufstechnik wie oben, ändern Sie jedoch die Hintergrundposition auf „rechts“. ."

Beispiel 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;

Durch Anpassen der Prozentsätze im linearen Farbverlauf können Sie das Verhältnis von Punkten zu Abständen steuern. Die Eigenschaft „Hintergrundgröße“ bestimmt die Punktgröße.

Hinweis: Diese Technik ermöglicht mehrere gepunktete Ränder durch die Verwendung mehrerer Hintergrundbilder.

Das obige ist der detaillierte Inhalt vonWie kann ich den Abstand von Punkten in gepunkteten CSS-Rändern steuern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!