- L'élément peut être un contenu, une image -
Un cadre ou bordure - border - se positionne dans ce sens ---> Top, right, bottom et left - Haut, droit, bas et gauche -
--->radius
Angles plus ou moins arrondis,
Se positionne comme suit--->Haut gauche, haut droit, bas droit, bas gauche,
Les différents styles de bordures,
---> none, 0
Aucune bordure,
---> hidden
Identique à none, Sauf en termes de résolution de conflit de bordure pour les éléments de tableau,
--->dotted
Série de points,
--->dashed
Série de segments de ligne courts,
--->solid
Segment de ligne continu,
--->double
Deux lignes continues, L'espace entre les deux lignes est égale à la valeur de border-width,
--->groove
La bordure semble avoir été sculptée dans l'élément,
--->ridge
Le contraire de groove, La bordure semble sortir de l'élément,
--->inset
La bordure donne l’impression que la boîte est intégrée à l'élément,
--->outset
L'opposé de inset, la bordure donne l'impression que la boîte sort,
Il est possible de composer bien des variantes en se servant des fonctions outline et offset,
--->outline
Contour extérieur à l'élément,
--->offset
Espace entre l'élément et le contour, Transparent, son rendu est identique à l'arrière plan, Sauf si vous apportez une couleur ou une ombre,
Voici un exemple
/*cadre bicolor*/
#contenu {
border: 10px double #...; /*une double ligne se place en bordure*/
outline-offset: 12px; /*espace entre bordure contour*/
outline: 12px solid #...; /*bordure ou contour externe*/
border-radius: 14px; /*ici, tous les angles sont identiques*/
box-shadow: 0px 0px 30px 2px #...; /*apport d'une ombre colorée entre l'élément et le contour externe*/
}
--->#... color au choix,
A vous de composer,
Voici un petit exemple, A savoir que lorsque vous apportez un effet, il peut se reproduire en d'autres endroits, Par exemple, si vous l'appliquez sur une image, il peut en impacter d'autres,
Pour éviter ce désagrément, insérez votre style dans une div,
Bonne journée,
