Comment ajouter du texte dans les frontières en utilisant des éléments HTML de base

De nombreux éléments HTML, bien que fonctionnels, possèdent des styles par défaut qui se heurtent à l'esthétique de la conception Web moderne.<fieldset></fieldset> et<legend></legend> , généralement utilisé pour le regroupement des contrôles de formulaire, offrent une solution unique pour créer du texte bordé. Cette combinaison positionne intrinsèquement le texte à l'intérieur de la frontière, sans que la ligne de frontière coupe le texte. Cet article montre une méthode simple mais efficace pour tirer parti de cette fonctionnalité pour créer des conceptions de texte de bordure élégantes.

Nous allons construire une conception en utilisant quatre<fieldset></fieldset> éléments, chacun contenant un<legend></legend> élément du texte de la bordure. Le principe central consiste à manipuler les frontières et à positionner ces éléments pour atteindre l'effet souhaité.

Tout d'abord, nous empilons le<fieldset></fieldset> Éléments, appliquant des styles pour contrôler leurs frontières. Seulement la bordure supérieure de chacun<fieldset></fieldset> sera visible; Les autres sont rendus transparents. Nous utilisons également box-sizing: border-box pour assurer le dimensionnement cohérent, y compris les frontières et le rembourrage. L'empilement peut être réalisé en utilisant diverses méthodes de mise en page, telles qu'une grille.

Lavez-vous les mains

Rester séparé

Porter un masque

Rester à la maison

 corps {
  Affichage: grille;
  marge: auto;
  marge: calc (50vh - 170px);
  Largeur: 300px;
  hauteur: 300px;
}

Fieldset {
  Border: 10px solide transparent;
  Color de bordure: noir;
  Dimensionnement en boîte: Border-Box;
  Grid-Area: 1/1;
  rembourrage: 20px;
  Largeur: héritage;
}

Pour créer les bordures latérales et inférieures, nous tournons les trois derniers<fieldset></fieldset> Éléments utilisant des transformations CSS:

 / * tourner à droite * /
Fieldset: Nth of-Type (2) {Transform: Rotate (90DEG); }
/ * tourner en bas * /
Fieldset: Nth of-Type (3) {Transform: Rotate (180DEG); }
/ * tourner à gauche * /
Fieldset: nth of-type (4) {transform: rotate (-90deg); }

Ensuite, nous stylisons le<legend></legend> Éléments. Surtout, une petite ou une line-height nulle est essentielle pour un alignement des frontières précises. Des hauteurs de ligne plus grandes peuvent déplacer la bordure, perturbant la conception. Nous utilisons également CSS Transforts pour corriger l'orientation du fond<legend></legend> élément, qui est inversé en raison de la rotation de son parent<fieldset></fieldset> .

 légende {
  Police: 15pt / 0 'Averia serif libre';
  marge: auto;
  rembourrage: 0 4px;
}

Fieldset: Nth of-Type (3)> Légende {
  transformée: rotation (180deg);
}

Ajouter une image à la première<fieldset></fieldset> améliore la conception. L'alignement du texte horizontal à l'intérieur des frontières peut être ajusté à l'aide de propriétés margin-left et margin-right . Les valeurs auto pour les deux marges centrent le texte.

Bonus: cette technique peut être étendue pour créer des formes plus complexes, telles que la conception octogonale montrée dans l'exemple original. En ajustant soigneusement la rotation, le positionnement et les styles de bordure, une grande variété de conceptions de texte de bordure créatives sont possibles.

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!