So fügen Sie Text in Grenzen mit grundlegenden HTML -Elementen hinzu

Viele HTML -Elemente besitzen zwar funktional, besitzen jedoch Standardstile, die mit der modernen Webdesign -Ästhetik zusammenhängen.<fieldset></fieldset> Und<legend></legend> Bieten Sie in der Regel zum Gruppieren von Formularsteuerungen und bieten eine eindeutige Lösung zum Erstellen von ausrandetem Text. Diese Kombination positioniert inhärent Text innerhalb des Grenze, ohne dass sich die Grenzlinie den Text schneidet. Dieser Artikel zeigt eine einfache und dennoch effektive Methode, um diese Funktion für die Erstellung stilvoller Grenztextdesigns zu nutzen.

Wir werden ein Design mit vier erstellen<fieldset></fieldset> Elemente, die jeweils a enthalten<legend></legend> Element für den Grenztext. Das Kernprinzip beinhaltet die Manipulation der Grenzen und die Positionierung dieser Elemente, um den gewünschten Effekt zu erzielen.

Erstens stapeln wir die<fieldset></fieldset> Elemente, Styles anwenden, um ihre Grenzen zu kontrollieren. Nur der obere Rand von jedem<fieldset></fieldset> wird sichtbar sein; Die anderen werden transparent gemacht. Wir verwenden auch box-sizing: border-box um eine konsistente Größe zu gewährleisten, einschließlich Grenzen und Polsterung. Das Stapeln kann mit verschiedenen Layoutmethoden wie einem Netz erreicht werden.

Wasch deine Hände

Bleib getrennt

Tragen Sie eine Maske

Bleib zu Hause

 Körper {
  Anzeige: Grid;
  Rand: Auto;
  Randtop: Calc (50VH - 170px);
  Breite: 300px;
  Höhe: 300px;
}

Fieldset {
  Grenze: 10px fest transparent;
  Border-Top-Color: Schwarz;
  Kastengrößen: Border-Box;
  Gitterfläche: 1/1;
  Polsterung: 20px;
  Breite: Erbe;
}

Um die Seiten- und Bodengrenzen zu erstellen, drehen wir uns die letzten drei<fieldset></fieldset> Elemente mit CSS -Transformationen:

 / * nach rechts drehen */
Fieldset: N-ten-vom-Typ (2) {Transformation: Drehen (90 Grad); }
/ * nach unten drehen */
Fieldset: N-ten-vom-Typ (3) {Transformation: rotate (180 Grad); }
/ * nach links drehen */
Fieldset: N-ten-vom-Typ (4) {Transformation: rotate (-90de); }

Als nächstes stylen wir das<legend></legend> Elemente. Entscheidend ist, dass eine kleine oder null line-height für eine präzise Grenzausrichtung von wesentlicher Bedeutung ist. Größere Linienhöhen können den Rand verdrängen und das Design stören. Wir verwenden auch CSS -Transformationen, um die Ausrichtung des Bodens zu korrigieren<legend></legend> Element, das aufgrund der Rotation seines Elternteils umgekehrt ist<fieldset></fieldset> .

 Legende {
  Schriftart: 15pt/0 'Averia Serif libre';
  Rand: Auto;
  Polsterung: 0 4px;
}

Fieldset: N-te-vom-Typ (3)> Legende {
  Transformation: Drehen (180 Grad);
}

Hinzufügen eines Bildes zum ersten<fieldset></fieldset> Verbessert das Design. Die horizontale Textausrichtung innerhalb der Grenzen kann unter Verwendung von margin-left und margin-right Eigenschaften angepasst werden. auto für beide Margen zentrieren den Text.

Bonus: Diese Technik kann erweitert werden, um komplexere Formen zu erstellen, wie das achteckige Design im ursprünglichen Beispiel. Durch die sorgfältige Anpassung der Rotation, Positionierung und Grenzstile sind eine Vielzahl kreativer Grenztextdesigns möglich.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Text in Grenzen mit grundlegenden HTML -Elementen hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!