Comment utiliser la bordure CSS

Comment utiliser l'attribut border de CSS border, quels sont les attributs de border et comment contrôler la largeur, la couleur, la ligne pointillée, la ligne continue et d'autres styles de bordure de l'objet. Nous vous le présenterons en détail dans. cet article

La bordure CSS est la couleur du style de bordure, le style de bordure, la structure syntaxique de la largeur de la bordure et le didacticiel de cas d'application

Connaissances de base de la bordure CSS

La bordure CSS est CSS border est un objet de contrôle Largeur de ligne de bordure, couleur, ligne pointillée, ligne continue et autres propriétés CSS de style

Tableau HTMLbordure de contrôle :

border="1" bordercolor ="#000000"

Description : contrôlez la largeur de la bordure du tableau sur 1 px, la couleur CSS sur le noir et la valeur par défaut est une bordure de style unie.

Quatre bordures

border-left définit la bordure gauche Généralement, le style de bordure gauche est défini séparément

border-right définit la bordure droite. le style de bordure est défini séparément.

border-top Définit la bordure supérieure Généralement, le style de bordure supérieure est défini séparément

border-bottomDéfinit la bordure inférieure. Généralement, le style de bordure inférieure est défini séparément. Parfois, le style de bordure inférieure peut être défini séparément. Le style de bordure est appliqué comme un effet de soulignement CSS.

L'abréviation de border avec la même bordure sur quatre côtés

#div{border:1px solid #00F>

Définissez une bordure unie bleue de 1 px pour l'objet div5 box

Trois styles de bordures

Habituellement, nous pouvons définir les trois attributs et paramètres de la bordure : la largeur (épaisseur), le style de bordure et la couleur de la bordure.

Couleur de la bordure :border-color:#000

Épaisseur de la bordure (largeur) :border-width:1px

Utilisez nombre + unité pour définir la largeur de l'épaisseur de la bordure, par exemple 1 px (la largeur de l'épaisseur de la bordure est de 1 pixel). La bordure doit être un nombre positif, une valeur supérieure à 0. Sinon, la définition du style de bordure n'est pas valide.

border border style :border-style:solid

Les valeurs du style de bordure sont les suivantes :

aucun : pas de bordure. Indépendant de toute valeur de largeur de bordure spécifiée

masqué : masquer la bordure. IE ne prend pas en charge

pointillé : IE4+ sur la plateforme MAC et IE5.5+ sur les plateformes WINDOWS et UNIX sont des lignes pointillées. Sinon, il s'agit d'une ligne continue (couramment utilisée)

en pointillés : IE4+ sur plateforme MAC et IE5.5+ sur plateforme WINDOWS et UNIX sont des lignes pointillées. Sinon, ligne pleine (couramment utilisée)

pleine : bordure pleine (couramment utilisée)

double : double bordure. La somme de deux lignes simples et leur intervalle est égal à la valeur de largeur de bordure spécifiée

groove : dessinez une rainure 3D en fonction de la valeur de border-color

ridge : dessinez une bordure en losange selon la valeur de border-color

inset : Dessinez un bord concave 3D en fonction de la valeur de border-color

outset : Dessinez un bord convexe 3D en fonction de la valeur de border-color

CSS définit séparément la bordure gauche, la bordure droite, la bordure supérieure, la bordure inférieure

Écrivez les méthodes de définition de style CSS distinctes des bordures supérieure, inférieure, gauche et droite sous forme d'abréviation

1. 1px bordure supérieure en pointillé noir

border-top:1px dashed #000

2. 1px bordure inférieure en ligne continue noire

border-bottom:1px solid #000

3. 1px bordure gauche en ligne pointillée noire

border-left:1px dashed #000

4. Bordure droite en ligne continue noire de 1 px

border-right:1px solid #000

Styles de bordure couramment recommandés

Nous utilisons généralement les styles de bordure compatibles avec les navigateurs grand public :

Bordure unie : solide

Border:1px solid #000 Définissez l'objet sur 1px (pixels) Bordure noire unie et épaisse.

Bordure de tiret : pointillé

Bordure : 1px dashed #000 Définit la bordure pointillée noire de 1 px (pixel) d'épaisseur de l'objet.

Utilisation de la bordure CSS

Définissez le style de bordure de l'objet, définissez des styles de bordure supérieure, de bordure inférieure, de bordure gauche et de bordure droite séparés pour obtenir l'embellissement et la beauté. La frontière joue le rôle de segmentation et de planification de l'aménagement.

Tutoriel graphique abrégé d'optimisation du style de bordure de bordure

Code de cas d'application de bordure CSS

Description : Afin d'observer l'effet de casse, nous définissons une largeur CSS de 200 px, une hauteur CSS de 1px, boîte DIV rouge avec bordure pleine

#div{height:100px;width:200px;border:1px solid #F00}

Fragment correspondant au code HTML :

我的高度为100px,宽度为200px

résumé de la bordure CSS

Nous utilisons DIV CSS pour définir le style de bordure , généralement nous utilisons l'abréviationexpressionpour définir le style de bordure de l'objet, ce qui enregistre le code et simplifie la fonction de code. Qu'il s'agisse de définir une bordure unique ou une bordure à quatre côtés, nous essayons d'abréger le code de bordure CSS, qui est l'abréviation de CSS border optimisation. Les codes d'attribut couramment utilisés pour définir les styles CSS sur les objets sont : border:1px solid #000;.

11. Trois côtés ont des bordures mais un côté n'a aucune compétence de réglage

Par exemple, il y a des bordures en bas à gauche et à droite et le style est une bordure noire pleine de 1PX de largeur, mais il y a il n'y a pas de bordure sur le dessus.

Code CSS :

border:1px solid #000; border-top:none;

Notez que l'ordre de border:1px solid #000 et border-top:none ne peut pas être échangé. Étant donné que la lecture CSS a pour principe de lire de haut en bas et de gauche à droite, cela n'a aucun sens de définir d'abord tout le style de bordure, puis de déclarer la bordure supérieure sur "aucun", c'est-à-dire pour obtenir le style requis par ceci exemple. Cela élimine le besoin de définir séparément les paramètres inférieur, gauche et droit, économisant ainsi une certaine quantité de code.

Il existe de nombreuses façons d'utiliser la bordure CSS. Les amis qui en ont besoin peuvent la sauvegarder. Veuillez également continuer à prêter attention aux autres mises à jour sur ce site.

Lecture connexe :

Comment mettre du texte en gras en CSS

Comment définir l'attribut margin de CSS

Comment utiliser DIV+CSS

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!