Bordure CSS

Bordure CSS

La bordure d'un élément est constituée d'une ou plusieurs lignes entourant le contenu et le remplissage de l'élément.

La propriété CSS border vous permet de spécifier le style, la largeur et la couleur de la bordure d'un élément.

Bordures CSS

En HTML, nous utilisons des tableaux pour créer des bordures autour du texte, mais en utilisant la propriété CSS border, nous pouvons créer de superbes bordures et pouvons être appliquées à n’importe quel élément.

La marge intérieure de l'élément est la bordure de l'élément. La bordure d'un élément est constituée d'une ou plusieurs lignes qui entourent le contenu et les bordures intérieures de l'élément.

Chaque bordure a 3 aspects : la largeur, le style et la couleur. Dans les pages suivantes, nous vous expliquerons ces trois aspects en détail.

Bordures et arrière-plans

La spécification CSS indique que les bordures sont dessinées "sur l'arrière-plan d'un élément". Ceci est important car certaines bordures sont « interrompues » (par exemple, les bordures en pointillés ou en tirets) et l'arrière-plan de l'élément doit apparaître entre les parties visibles de la bordure.

CSS2 indique que l'arrière-plan s'étend uniquement jusqu'au remplissage, pas à la bordure. Plus tard, CSS2.1 a apporté une correction : l'arrière-plan de l'élément est l'arrière-plan du contenu, du remplissage et des zones de bordure. La plupart des navigateurs suivent la définition CSS2.1, bien que certains navigateurs plus anciens puissent se comporter différemment.

Style de la bordure

Le style est l'aspect le plus important de la bordure, et ce n'est pas parce que le style contrôle l'affichage de la bordure (bien sûr, le style contrôle l'affichage de la bordure), mais parce que sans le style, il n'y aurait pas de bordure du tout.

La propriété border-style de CSS définit 10 styles différents non hérités, dont aucun.

Par exemple, vous pouvez définir la bordure d'une image comme début pour la faire ressembler à un "bouton en relief" :

a:link img {border-style: outset }<🎜; >

border-style value :

aucun : sans bordure par défaut

dotted : dotted : définir un cadre en pointillé

pointillé : définissez une boîte en pointillés

solide : définissez une limite solide

double : définissez deux limites. La largeur des deux bordures et la valeur de border-width sont les mêmes

groove : Définissez la limite du groove 3D. L'effet dépend de la valeur de couleur de la bordure

crête : Définit la bordure de la crête 3D. L'effet dépend de la valeur de couleur de la bordure

encart : Définit une bordure intégrée en 3D. L'effet dépend de la valeur de couleur de la bordure

départ : Définit une bordure saillante 3D. L'effet dépend de la valeur de couleur de la bordure

Définir plusieurs styles

Vous pouvez définir plusieurs styles pour une bordure, par exemple :

p .aside {border-style: solid dotted dashed double;>

La règle ci-dessus définit quatre styles de bordure pour les paragraphes avec le nom de classe à part : bordure en ligne continue, bordure droite en pointillé et bordure inférieure en pointillé et une bordure gauche à double ligne.

Nous voyons à nouveau que les valeurs adoptent ici l'ordre haut-droit-bas-gauche. Nous avons également vu cet ordre en discutant de la façon de définir différents remplissages avec plusieurs valeurs.

Définir le style d'un seul côté

Si vous souhaitez définir le style de bordure pour un côté de la boîte d'éléments au lieu de définir le style de bordure pour les 4 côtés, vous peut utiliser l'attribut de style de bordure unilatéral suivant :

border-top-style

border-right-style

border-bottom-style

border-left- style

Donc ces deux méthodes sont équivalentes :

p {border-style: solid solid solid none;}
p {border-style: solid border-; left- style : aucun ;>

Remarque : Si vous souhaitez utiliser la deuxième méthode, vous devez mettre l'attribut unilatéral après l'attribut abrégé. Parce que si vous placez l'attribut unilatéral avant border-style, la valeur de l'attribut abrégé écrasera la valeur unilatérale none.

Bordure - attribut raccourci

L'exemple ci-dessus utilise de nombreux attributs pour définir la bordure.

T Vous pouvez également définir la bordure dans une propriété.

Vous pouvez le définir dans l'attribut "border":

border-width

border-style (obligatoire)

border-color

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p
{
border:5px solid orange;
}
</style>
</head>
<body>
<p>段落文字部分</p>
</body>
</html>

Attributs du cadre CSS

La description de l'attribut

L'attribut d'abréviation de bordure, qui est utilisé pour définir les attributs des quatre côtés dans une déclaration.

Border-Style est utilisé pour définir le style de toutes les bordures de l'élément, ou définir le style de bordure pour chaque côté.

Attribut d'abréviation Border-Width, pour définir la largeur de toutes les bordures de l'élément, ou définir la largeur pour chaque bordure seule.

Attribut d'abréviation Border-color, la couleur de la partie de toutes les bordures de l'élément peut être définie, ou la couleur est définie séparément pour les 4 côtés.

Les attributs d'abréviation de Border-Bottom sont utilisés pour définir tous les attributs du cadre inférieur dans une instruction.

border-bottom-color Définit la couleur de la bordure inférieure de l'élément.

border-bottom-style Définit le style de la bordure inférieure de l'élément.

border-bottom-width Définit la largeur de la bordure inférieure de l'élément.

Attribut d'abréviation Border-Left, qui est utilisé pour définir tous les attributs du cadre gauche dans une instruction.

border-left-color Définit la couleur de la bordure gauche de l'élément.

border-left-style Définit le style de la bordure gauche de l'élément.

border-left-width Définit la largeur de la bordure gauche de l'élément.

border-right Attribut raccourci, utilisé pour définir tous les attributs de la bordure droite en une seule instruction.

border-right-color Définit la couleur de la bordure droite de l'élément.

border-right-style Définit le style de la bordure droite de l'élément.

border-right-width Définit la largeur de la bordure droite de l'élément.

attribut raccourci border-top, utilisé pour définir tous les attributs de la bordure supérieure en une seule instruction.

border-top-color Définit la couleur de la bordure supérieure de l'élément.

border-top-style Définit le style de la bordure supérieure de l'élément.

border-top-width Définit la largeur de la bordure supérieure de l'élément.