Bordures Tailwind CSS

Dans Tailwind CSS,Bordures(Bordures) sont un style courant dans la mise en page et le design, utilisé pour ajouter des limites ou des lignes de séparation aux éléments.

Tailwind fournit une variété de classes utilitaires de bordure pour vous aider à contrôler la largeur, la couleur, le style, le rayon et les bordures de chaque côté.

Largeur de bordure

La largeur de bordure détermine l'épaisseur des lignes de bordure d'un élément. Tailwind CSS fournit différentes valeurs de largeur de bordure, vous permettant de contrôler rapidement le style des bordures d'un élément.

Couleur de bordure

En utilisantborder-{color}classes utilitaires, vous pouvez définir la couleur de la bordure d’un élément. Tailwind CSS fournit un grand nombre de couleurs prédéfinies qui peuvent être utilisées directement, et prend également en charge les couleurs personnalisées.

<div class="border-2 border-red-500 p-4">
  红色边框，宽度为 2px
</div>

Style de bordure

Tailwind CSS prend également en charge la définition des styles de bordure, tels que solid, dashed, dotted, etc. Grâce àborder-{style}classes utilitaires, vous pouvez contrôler le style d'affichage des bordures.

<div class="border-4 border-dashed border-blue-400 p-4">
  蓝色虚线边框，宽度为 4px
</div>

Rayon de bordure

En définissantborder-radius, vous pouvez contrôler l'effet d'arrondi des coins d'un élément. Tailwind CSS fournit plusieurs valeurs de rayon de bordure et vous permet de définir différents rayons d'arrondi dans différentes directions.

<div class="border-4 border-gray-400 rounded-lg p-6">
  大圆角边框
</div>

Contrôle des bordures pour les quatre directions

Vous pouvez contrôler individuellement la bordure de chaque côté (haut, droite, bas, gauche), par exemple :border-t-2contrôler la largeur de la bordure supérieure,border-r-4contrôler la largeur de la bordure droite, etc.

<div class="border-t-4 border-r-2 border-b-1 border-l-3 border-blue-500 p-4">
  自定义各个方向的边框
</div>

Contrôle unifié des bordures (Border)

Si vous souhaitez définir le même style pour toutes les bordures, utilisezborderclasse utilitaire. Vous pouvez combiner d'autres classes utilitaires pour contrôler la couleur, le style et la largeur.

<div class="border-4 border-solid border-green-500 p-4">
  绿色实线边框，宽度为 4px
</div>

Bordures intérieures et extérieures (modèle de boîte)

Tailwind CSS fournit également des utilitaires pour contrôler les classes utilitaires dumodèle de boîte, en particulier pour les bordures intérieures et extérieures, les marges et le remplissage, etc.

<div class="box-border border-4 border-red-500 p-4">
  边框包含在内的盒子模型
</div>

Exemple complet combinant tous les utilitaires de bordure