Propriétés CSS liées à la décoration du modèle de boîte

Articles

Cet article explique les propriétés CSS liées à la décoration du modèle de boîte.

Vous pouvez apprendre à écrire des propriétés telles que les bordures et les ombres.

YouTube Video

HTML pour l'aperçu

css-decoration.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

Décoration

Propriété `border`

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

La propriété border est utilisée en CSS pour définir le cadre d'un élément. border se compose de trois éléments : la largeur, le style et la couleur, et ils sont combinés pour définir le cadre de l'élément.

Structure de base de `border`

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

Utilisez border-width pour spécifier l'épaisseur de la bordure. Les unités sont spécifiées en px, em, %, etc.
Spécifiez le type de bordure avec border-style. Vous pouvez spécifier les valeurs suivantes.
- Valeurs de style :
  - none (pas de bordure)
  - solid (ligne solide)
  - pointillé (ligne pointillée)
  - tireté (ligne en tirets)
  - double (ligne double)
  - groove (ligne rainurée)
  - ridge (ligne en relief)
  - inset (ligne ombrée intérieure)
  - outset (ligne ombrée extérieure)

Spécifiez la couleur de la bordure avec border-color. La couleur peut être spécifiée en utilisant des noms de couleurs, rgb(), rgba(), hex, etc.

Paramètres individuels pour chaque côté

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

Vous pouvez également définir différents styles pour chaque côté comme ceci.

Paramètres individuels pour la largeur, le style et la couleur

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

Vous pouvez également spécifier chaque aspect séparément en utilisant border-width, border-style et border-color.

Combinaison avec `border-radius`

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

Avec la propriété border-radius, vous pouvez arrondir les coins de la bordure.

Propriété `border-radius`

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

La propriété border-radius est utilisée pour arrondir les coins d'un élément. Vous pouvez courber les quatre coins d'un élément HTML de manière fluide, transformant des rectangles ou carrés en un design arrondi.

Explication :

La classe border-radius-all-rounded rend tous les coins arrondis avec 20 pixels, produisant une boîte arrondie en douceur.
La classe border-radius-top-left-rounded arrondit uniquement le coin supérieur gauche avec 20 pixels, laissant les autres coins carrés.
La classe border-radius-ellipse-corners crée des coins elliptiques, produisant une boîte avec une forme arrondie étirée horizontalement.

Le format de la propriété `border-radius`

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;

La valeur de la propriété border-radius est généralement spécifiée en pixels ou en pourcentages. De plus, vous pouvez définir de 1 à 4 valeurs.
- Spécifier une valeur rend tous les coins uniformément arrondis.
- Spécifier deux valeurs applique la première valeur aux coins supérieur gauche et inférieur droit, et la deuxième valeur aux coins supérieur droit et inférieur gauche.
- En spécifiant quatre valeurs, vous pouvez définir des rayons différents pour chaque coin. Les valeurs sont appliquées dans le sens des aiguilles d'une montre à partir du coin supérieur gauche.
Vous pouvez également spécifier individuellement comme border-top-left-radius.

1border-radius: 50px / 25px;

La propriété border-radius peut également spécifier individuellement les rayons verticaux et horizontaux pour rendre les coins elliptiques. Dans ce cas, séparez avec /.
- Par exemple, spécifier 50px / 25px rend le rayon horizontal de 50 pixels et le rayon vertical de 25 pixels.

Résumé

border-radius est une propriété pour arrondir les coins d'un élément.
Vous pouvez spécifier l'arrondi des coins en pixels ou en pourcentages, l'appliquer à tous les coins, à des coins spécifiques, ou les rendre elliptiques.
C'est utile pour des conceptions flexibles et pour personnaliser les interfaces utilisateur.

Propriété `outline`

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

La propriété outline est une propriété CSS permettant de définir la ligne tracée autour d'un élément.

outline est similaire à border, mais diffère sur les points suivants :.

outline n'affecte pas le modèle de boîte de l'élément, il n'a donc pas d'impact sur la disposition de l'élément.
Comme outline est tracé à l'extérieur de l'élément, il apparaît en dehors de border.
border est tracé à l'intérieur de l'élément, donc il peut affecter la taille et la disposition de l'élément.

Dans cet exemple, la propriété outline est définie comme suit :.

La classe outline-solid définit un contour rouge solide de 2px d'épaisseur.
La classe outline-dashed définit un contour bleu en tirets de 3px.
La classe outline-double définit un contour vert en double ligne de 4px d'épaisseur.
La classe outline-offset définit un espacement de 10px entre le contour et l'élément.

Syntaxe de base

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}

`outline-width`

outline-width spécifie l'épaisseur du contour.
Vous pouvez spécifier des valeurs comme thin, medium, thick, ou en unités comme px, em.

`outline-style`

outline-style spécifie le style du contour.
Vous pouvez spécifier des styles comme solid, dotted, dashed, double, groove, ridge, inset, outset, none, etc.

`outline-color`

outline-color spécifie la couleur du contour.
Vous pouvez spécifier n'importe quelle couleur en utilisant des noms, des codes HEX, RGB, etc.

`outline-offset`

outline-offset spécifie la distance entre le contour et l'élément.
Vous pouvez spécifier des valeurs exactes en unités comme px, em, etc.

Propriété `box-shadow`

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

La propriété box-shadow est utilisée pour ajouter des ombres aux éléments. En utilisant cette propriété, vous pouvez créer des ombres autour des éléments pour exprimer une sensation de dimensionnalité et de profondeur.

Explication :

Dans la classe box-shadow-basic-shadow, une ombre noire floue est affichée en bas à droite de l'élément.
Dans la classe box-shadow-inset-shadow, une ombre floue est affichée à l'intérieur de l'élément. Avec l'ombre entrant à l'intérieur, vous pouvez obtenir un design en relief inversé.
Dans la classe box-shadow-multiple-shadow, deux ombres, noire et rouge, sont appliquées à l'élément. Étant donné qu'elles sont affichées à des positions différentes, un effet tridimensionnel est obtenu.

Format de la propriété `box-shadow`

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];

Signification de chaque valeur

Le premier horizontal offset correspond à la valeur du décalage horizontal, et spécifie la position de l'ombre par rapport au côté gauche de l'élément. Indiquer une valeur positive place l'ombre à droite, et une valeur négative la place à gauche.

Le second vertical offset correspond à la valeur du décalage vertical, et spécifie la position de l'ombre par rapport au côté supérieur de l'élément. Indiquer une valeur positive place l'ombre en dessous, et une valeur négative la place au-dessus.

Le troisième blur radius est la valeur déterminant la quantité de flou, spécifiant l'intensité de l'effet flouté de l'ombre. Plus la valeur est grande, plus l'ombre s'étale, créant une ombre plus floue. Indiquer une valeur positive place l'ombre en dessous, et une valeur négative la place au-dessus. Cela est optionnel et la valeur par défaut est 0, ce qui signifie qu'il n'y a pas de flou sur l'ombre.

Le quatrième spread radius est la valeur de l'étendue de l'ombre, spécifiant jusqu'où elle s'étale. Indiquer une valeur positive agrandira l'ombre, tandis qu'une valeur négative la réduira. Cette valeur est également optionnelle.

Le cinquième color est la valeur de la couleur, spécifiant la couleur de l'ombre. Les couleurs peuvent être définies en utilisant des noms de couleurs, RGB, HEX, HSL, et d'autres modèles de couleurs disponibles en CSS. Si elle est omise, la couleur par défaut du texte de l'élément (valeur de la propriété color) est appliquée.

Vous pouvez également spécifier d'abord le mot-clé inset. Spécifier le mot-clé inset dessine l'ombre à l'intérieur de l'élément au lieu de l'extérieur. Il est également possible de définir plusieurs ombres séparées par des virgules.

Exemple de `box-shadow`

Exemple de base d'ombre

1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}

Le décalage horizontal est de 10px, créant une ombre 10 pixels vers la droite.
Le décalage vertical est de 10px, créant une ombre 10 pixels vers le bas.
Le rayon de flou est de 5px, ce qui donne une ombre floue de 5 pixels.
La couleur est rgba(0, 0, 0, 0.5), ce qui donne un noir semi-transparent.

Exemple d'ombre intérieure

1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}

L'utilisation de inset dessine l'ombre à l'intérieur de l'élément.

Exemple de multiples ombres

1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}

Vous pouvez également définir plusieurs ombres, séparées par des virgules. Dans cet exemple, deux ombres sont appliquées : une ombre noire et une ombre rouge.

Résumé

box-shadow est une propriété utilisée pour ajouter des ombres aux éléments afin de créer une sensation de profondeur.
En combinant les décalages horizontal et vertical, le flou, le rayon d'expansion et la couleur, une variété d'effets peut être obtenue.
Vous pouvez dessiner des ombres à l'intérieur avec inset, et définir également plusieurs ombres en même temps.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Propriétés CSS liées à l'arrière-plan Propriétés CSS liées aux listes

Propriétés CSS liées à la décoration du modèle de boîte

YouTube Video

HTML pour l'aperçu

Décoration

Propriété border

Structure de base de border

Paramètres individuels pour chaque côté

Paramètres individuels pour la largeur, le style et la couleur

Combinaison avec border-radius

Propriété border-radius

Explication :

Le format de la propriété border-radius

Résumé

Propriété outline

Syntaxe de base

outline-width

outline-style

outline-color

outline-offset

Propriété box-shadow

Explication :

Format de la propriété box-shadow

Signification de chaque valeur

Exemple de box-shadow

Exemple de base d'ombre

Exemple d'ombre intérieure

Exemple de multiples ombres

Résumé

YouTube Video

Propriété `border`

Structure de base de `border`

Combinaison avec `border-radius`

Propriété `border-radius`

Le format de la propriété `border-radius`

Propriété `outline`

`outline-width`

`outline-style`

`outline-color`

`outline-offset`

Propriété `box-shadow`

Format de la propriété `box-shadow`

Exemple de `box-shadow`