Comment définir la bordure div dans bootstrap

style de bordure div :

bordure : 1px solide #FF0000
signifie 4 éléments ; Tous les côtés sont bordés d'une bordure droite de 1 pixel, rouge.
1px représente la largeur de la bordure, solide représente une ligne droite (des lignes pointillées peuvent être utilisées), #FF0000 est la valeur de couleur

Plusieurs styles de bordure DIV courants, pas de bordure, bordure en pointillés, en pointillés line Bordures de type, bordures linéaires, bordures à double ligne, bordures rainurées, bordures striées, bordures à effet en ligne, bordures à effet en relief, etc.

Si vous souhaitez définir quatre côtés différents, utilisez :
border-top:
border-right:
border-bottom:
border-left:

Code d'implémentation du style de bordure div :

1. Bordure convexe extérieure :

Effet :
Texte du journal
Code :

<div style="BORDER-RIGHT: 3px outset;
 BORDER-TOP: 3px outset; 
 BACKGROUND: #ffffff; 
 BORDER-LEFT: 3px outset; 
 WIDTH: 100%; 
 BORDER-BOTTOM: 3px outset; 
 HEIGHT: 100%" align=left>日志文字</DIV>

Description du code :
La partie bleue est la partie modifiable, expliquez une à une :
Les quatre 2 représentent la largeur de la bordure en relief. Si vous utilisez 1, ce ne sera pas évident. . Comparez 2 ou 3. Convient ;
Les quatre débuts indiquent que le type de bordure est "en relief". S'ils sont modifiés en médaillon ou en double, ils auront respectivement les effets de bordures enfoncées et de bordures à double ligne. les codes pour les autres effets seront donnés ci-dessous ;
WIDTH : 100 % ; et HEIGHT : 100 % signifie que la largeur de cette boîte représente 100 % de la largeur du journal. Lorsque la fenêtre s'agrandit et se contracte, la largeur de. la boîte s'agrandira et se contractera également. HEIGHT représente la hauteur. De plus, il existe une autre façon de l'exprimer en px , l'unité est en pixels, par exemple : WIDTH : 355px signifie que la largeur de la boîte est de 355 pixels. avoir des largeurs de journaux différentes. Vous pouvez vous référer aux valeurs données ici. En général, cela peut être exprimé en pourcentage. Oui, mais vous devez parfois utiliser des pixels pour déterminer la taille, alors jouez simplement à l'oreille. align=left signifie que le contenu de la boîte est aligné à gauche. Changez respectivement de gauche à centre ou de droite pour aligner au centre et à droite. Si vous souhaitez un alignement à gauche, vous pouvez supprimer align=left. la valeur par défaut est l'alignement à gauche ;
ffffff représente la couleur d'arrière-plan dans la boîte, ffffff représente le blanc (000000 représente le noir), et la valeur de couleur peut se référer à ce tableau. Sélectionnez, en plus, changez #ffffff en transprant pour avoir un arrière-plan transparent. . Personnellement, je pense que les arrière-plans transparents sont plus couramment utilisés ; afin de faciliter le copier-coller, le code de bordure pour un arrière-plan transparent est donné comme suit : (La partie rouge dans la case est le code)

Log Text< ;/DIV> Le texte du journal est le contenu du journal dans la boîte. Il n'est pas nécessaire de le modifier dans le code. Revenez au mode de conception normal et double-cliquez sur la boîte générée pour entrer dans la zone pour modifier le texte.

2. Bordure concave :

Code :

<DIV style="BORDER-RIGHT: 3px inset;
BORDER-TOP: 3px inset; 
BACKGROUND: #ffffff; 
BORDER-LEFT: 3px inset; 
WIDTH: 100%; 
BORDER- BOTTOM: 3px inset; 
HEIGHT: 100%" align=left>日志文字</DIV>

Code de bordure concave à fond transparent :

<DIV style="BORDER- RIGHT: 3px inset; 
BORDER-TOP: 3px inset; 
BACKGROUND: transprant; 
BORDER-LEFT: 3px inset; 
WIDTH: 100%; 
BORDER-BOTTOM: 3px inset; 
HEIGHT: 100%" align=left>日志文字</DIV> 代码

3. :

<DIV style="BORDER-RIGHT: 3px double #000000;
 BORDER-TOP: 3px double #000000; 
 BACKGROUND: #ffffff; 
 BORDER-LEFT: 3px double #000000; 
 WIDTH: 100%; 
 BORDER-BOTTOM: 3px double #000000; 
 HEIGHT: 100%" align=left>日志文字</DIV>

Code de bordure à double ligne sur fond transparent :

<DIV style="BORDER-RIGHT: 3px double #000000; 
BORDER-TOP: 3px double #000000; 
BACKGROUND: transprant; 
BORDER-LEFT: 3px double #000000; 
WIDTH: 100%; 
BORDER-BOTTOM: 3px double #000000; 
HEIGHT: 100%" align=left>日志文字</DIV>

En fait, la bordure avant peut également définir la couleur comme la bordure à double ligne, mais personnellement, je pense que il est concave et convexe. Il est préférable que la couleur de l'effet soit celle par défaut.

4. Bordure pointillée :

<DIV style="BORDER-RIGHT: 2px dashed #000000; 
BORDER-TOP: 2px dashed #000000; 
BACKGROUND: #ffffff; 
BORDER-LEFT: 2px dashed #000000; 
WIDTH: 100%; 
BORDER-BOTTOM: 2px dashed #000000;
 HEIGHT: 100%" align=left>日志文字</DIV>

Code de bordure pointillée sur fond transparent :

<DIV style="BORDER-RIGHT: 2px dashed #000000; 
BORDER-TOP: 2px dashed #000000; 
BACKGROUND: transpant; 
BORDER-LEFT: 2px dashed #000000; 
WIDTH: 100%;
 BORDER-BOTTOM: 2px dashed #000000;
  HEIGHT: 100%" align=left>日志文字</DIV>

5. >

<DIV style="BORDER-RIGHT: 7px groove; 
BORDER-TOP: 7px groove; 
BACKGROUND: transprant; 
BORDER-LEFT: 7px groove; 
WIDTH: 100%; BORDER-BOTTOM: 7px groove; 
HEIGHT: 100%" align=left>日志文字</DIV>

Personnellement, je pense qu'il est préférable d'utiliser une couleur de fond transparente pour cette bordure, et l'épaisseur de la bordure ne doit pas être trop petite, sinon l'effet ne sera pas évident

6. bordure à effet tridimensionnel

<DIV style="BORDER-RIGHT: 7px ridge; 
BORDER-TOP: 7px ridge; BACKGROUND: #ffffff; 
BORDER-LEFT: 7px ridge;
 WIDTH: 100%; 
 BORDER-BOTTOM: 7px ridge; 
 HEIGHT: 100%" align=left>日志文字</DIV>

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn