Code de bordure de page Web CSS

Les bordures de pages Web CSS sont principalement réalisées à l'aide de bordures, nous allons donc aujourd'hui nous familiariser avec les connaissances sur les bordures CSS. J'espère que cela aidera tout le monde

La bordure CSS est une propriété CSS qui contrôle la largeur, la couleur, la ligne pointillée, la ligne continue et d'autres styles de bordure de l'objet. En même temps, vous pouvez accéder au manuel CSS pour afficher le manuel des bordures

Tutoriel de connaissance des bordures DIV+CSS

Bordure originale HTML et comparaison des bordures DIV+CSS

Tableau HTMLBordure de contrôle :

border="1" bordercolor="#000000"

Description : Contrôlez la largeur de la bordure du tableau à 1px, la couleur CSS à noir, et la valeur par défaut est une bordure de style solide.

border border syntax

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. Généralement, pour définir le style de bordure droite séparément, utilisez

border-top pour définir la bordure supérieure. Généralement, pour définir le style de bordure supérieure séparément, utilisez

border-. bottom pour définir la bordure inférieure Généralement, pour définir le style de bordure inférieure séparément. Parfois, le style de bordure inférieure peut être appliqué comme 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éfinit une bordure solide bleue de 1 px pour l'objet div box

3. 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.

1), couleur de la bordure : border-color:#000

2), épaisseur de la bordure (largeur) : border-width:1px

Utilisez nombre + unité pour définir la largeur de l'épaisseur de la bordure, par exemple 1px (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.

3), border style de bordure : border-style:solid

Les valeurs de style de bordure sont les suivantes :

aucun : Aucune 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. Bordure supérieure en pointillés noirs de 1 px

bordure supérieure : 1 px en pointillés #000

2. Bordure inférieure unie noire de 1 px

bordure inférieure : 1 px solide #000

3. 1px bordure gauche en pointillé noir

border-left:1px pointillé #000

4. 1px bordure droite noire unie

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

Bordure : 1px solide #000 Définissez l'objet sur une épaisse bordure noire unie de 1px (pixels).

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

Code CSS :

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

Fragment correspondant au code HTML :

<div id="divcss5">我的高度为100px,宽度为200px</div>

Nous utilisons DIV CSS pour définir le style de bordure . Généralement, nous utilisons L'abréviation expression est utilisée pour 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;.

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

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

Notez que l'ordre de border:1px solid #000; . É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.

Lecture connexe :

Exemple d'utilisation de CSS pour aligner les deux extrémités d'une seule ligne de texte

Exemple détaillé de débordement en CSS

Balise de lien hypertexte en html

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!