Comment définir la bordure div avec CSS

CSS est une partie importante du HTML et est utilisé pour styliser les pages Web. Parmi eux, la définition de la bordure div est l'une des fonctions les plus élémentaires de CSS. Elle peut modifier le style de bordure, la taille, la couleur et d'autres attributs du div dans la page Web, rendant ainsi la page Web plus belle et hiérarchique. Cet article présentera en détail comment définir les bordures div et fournira quelques exemples pratiques pour référence aux lecteurs.

1. Feuilles de style CSS

Avant de commencer à apprendre les feuilles de style CSS, nous devons d'abord comprendre ce qu'est une feuille de style. Une feuille de style est un ensemble de règles qui définissent des styles pouvant être appliqués à différents éléments d'une page Web, tels que du texte, des liens, des images, des tableaux, etc. Les feuilles de style peuvent être référencées en tant que feuilles de style internes ou feuilles de style externes. Les feuilles de style internes sont écrites directement dans les documents HTML, tandis que les feuilles de style externes sont stockées sur le serveur sous forme de fichiers CSS et sont référencées par les documents HTML.

2. Définir la bordure div avec CSS

Présentons en détail comment définir la bordure div.

1. Définir le style de bordure

Il existe de nombreux choix pour le style de bordure du div, tels que la ligne continue, la ligne pointillée, la ligne pointillée, etc. Nous pouvons utiliser l'attribut border-style pour définir le style de bordure. La syntaxe est la suivante :

div {
    border-style: solid;
}

Dans l'exemple ci-dessus, nous définissons le style de bordure du div sur ligne continue. Les autres styles de bordure disponibles sont les suivants :

. pointilléBordure pointilléesolide bordure solide doublebordure double lignerainurebordure concave 3Dcrêtebordure convexe 3DinsetBordure intérieure 3Ddébut Bordure extérieure 3D

Style de bordure	Description
aucun	sans bordure
cachée	bordure cachée
pointillé	pointillé

2. Définir la taille de la bordure

La définition de la taille de la bordure div est également très simple. Nous pouvons utiliser l'attribut border-width pour définir la largeur de la bordure. pourcentages ou tailles prédéterminées, par exemple :

div {
     border-width: 2px;
}

Dans l'exemple ci-dessus, nous définissons la largeur de la bordure div sur 2 pixels.

3. Définir la couleur de la bordure

La couleur est l'un des éléments importants en CSS et l'un des facteurs clés dans la définition des bordures div. Nous pouvons utiliser l'attribut border-color pour définir la couleur de la bordure. La syntaxe est la suivante :

div {
     border-color: red;
}

Dans l'exemple ci-dessus, nous définissons la couleur de la bordure div sur rouge. La couleur de la bordure peut être définie en utilisant toutes les valeurs de couleur prises en charge. par CSS, comme le nom de la couleur (rouge, bleu, vert, etc.), les valeurs hexadécimales (#FF0000, #0000FF, etc.), les valeurs RVB (rgb(255, 0, 0), rgb( 0, 0, 255)), etc.

4. Définir les coins arrondis de la bordure

En plus des trois attributs de base ci-dessus, nous pouvons également utiliser l'attribut border-radius pour définir les coins arrondis de la bordure. La syntaxe est la suivante :

div {
     border-radius: 10px;
}

Dans l'exemple ci-dessus, nous définissons le rayon du coin de la bordure div sur 10 pixels. Vous pouvez également définir la taille du congé de chaque coin de la bordure, par exemple :

div {
     border-top-left-radius: 10px;
     border-top-right-radius: 15px;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 25px;
}

Dans l'exemple ci-dessus, nous définissons respectivement le rayon du congé des quatre coins de la bordure div. Bien sûr, vous pouvez également définir le congé. une certaine direction seulement.

3. Exemples de définition de bordures div avec CSS

Voici quelques exemples pratiques de bordures div pour référence des lecteurs :

1. Bordure solide

div {
     border-style: solid;
     border-width: 2px;
     border-color: black;
}

Les paramètres ci-dessus traceront une ligne noire d'une largeur de 2 pixels autour. la div. Bordure solide.

2. Bordure pointillée

div {
     border-style: dashed;
     border-width: 2px;
     border-color: red;
}

Les paramètres ci-dessus dessineront une bordure pointillée rouge d'une largeur de 2 pixels autour du div.

3. Bordure arrondie

div {
     border-style: solid;
     border-width: 2px;
     border-color: blue;
     border-radius: 20px;
}

Les paramètres ci-dessus dessineront une bordure bleue unie d'une largeur de 2 pixels et d'un rayon de coin de 20 pixels autour du div.

4.3D Border

div {
     border-style: groove;
     border-width: 2px;
     border-color: green;
}

Les paramètres ci-dessus dessineront une bordure concave 3D verte d'une largeur de 2 pixels autour du div.

4. Résumé

Cet article présente en détail comment utiliser CSS pour définir des attributs tels que le style, la taille et la couleur des bordures div, et fournit quelques exemples pratiques pour référence aux lecteurs. En maîtrisant ces connaissances de base, les lecteurs peuvent mieux concevoir les styles CSS et rendre les pages Web plus belles et plus superposées.

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!