Comment définir le style de bordure en CSS

CSS (Cascading Style Sheets) est un langage de balisage utilisé pour la conception Web. Il fournit divers styles et techniques pour rendre les pages Web plus vivantes et plus belles. Parmi eux, la définition de bordures est une application de style courante. Dans cet article, nous verrons comment définir des bordures avec CSS.

1. Bases des bordures CSS

Connaissances préalables : les bordures CSS sont composées de lignes et le style, la largeur et la couleur des lignes peuvent être définis.

Les principaux attributs pour définir les bordures en CSS sont les suivants :

1. border-style : style de bordure, qui peut être plein (ligne continue), pointillé (ligne pointillée), pointillé (ligne pointillée), double (ligne continue double ), rainure (ligne de rainure 3D, la couleur de la bordure n'est pas valide sous cet attribut), crête (ligne de crête 3D, la couleur de la bordure n'est pas valide sous cet attribut), encart (ligne d'insertion 3D, la couleur de la bordure n'est pas valide sous cet attribut) ) , début (la ligne de départ de la 3D, border-color n'est pas valide sous cet attribut), none (pas de bordure).
2. border-width : largeur de bordure, qui peut être définie sur une valeur de pixel spécifique ou sur trois largeurs prédéfinies : fine, moyenne et épaisse.
3. border-color : couleur de la bordure, qui peut être définie sur une valeur de couleur spécifique ou transparente.

Ces attributs peuvent être définis individuellement ou combinés, par exemple :

border: 2px solid #000;

Le code ci-dessus signifie définir la bordure, la largeur est de 2 pixels, le style est une ligne continue et la couleur est noir (#000 ).

2. Style de bordure CSS

Le style de bordure est très important et peut déterminer l'effet visuel de la page Web. Voici quelques styles de bordure courants :

1. Bordure solide

La bordure solide est la plus courante et peut être définie à l'aide de l'attribut border-style: solid.

Exemple de code :

.border-solid {
  border-style: solid;
  border-width: 2px;
  border-color: #000;
}

Rendu :

2. Bordure pointillée

La bordure pointillée est également un style fréquemment utilisé, qui peut être défini à l'aide de l'attribut border-style : pointillé ou border-style : pointillé. De plus, vous pouvez également utiliser border-style: double pour définir des lignes pleines doubles, et vous pouvez également utiliser border-style: ridge, border-style: inset, border-style: outset pour définir une bordure d'effet 3D.

Exemple de code :

.border-dotted {
  border-style: dotted;
  border-width: 2px;
  border-color: #000;
}

Rendu :

3. Bordure personnalisée

En plus des styles de bordure prédéfinis ci-dessus, nous pouvons également personnaliser la bordure. CSS fournit l'attribut border-image pour nous permettre de personnaliser la bordure. border-image doit utiliser une image comme bordure. Les quatre coins et les quatre côtés de l'image peuvent être définis respectivement sur des largeurs différentes, afin que l'effet d'une bordure personnalisée puisse être obtenu.

Exemple de code :

.border-img {
  border-image: url("border.png") 30 30 30 30 / 10px;
}

Rendu :

3. Coins arrondis des bordures CSS

Les bordures de coins arrondis sont très courantes et peuvent ajouter des effets visuels doux aux pages Web. Elles sont également utilisées dans de nombreuses conceptions de style carte. .

CSS fournit l'attribut border-radius pour définir le degré d'arc de la bordure. Il peut contrôler l'arc des quatre coins en même temps, et vous pouvez également définir l'attribut de coin arrondi de la bordure pour un coin individuellement.

Exemple de code :

.border-radius {
  border: 2px solid #000;
  border-radius: 10px; /* 或者使用 border-radius: 10px 10px 10px 10px; */
}

Rendu :

4. Dégradé de bordure CSS

L'utilisation de bordures dégradées peut donner à la page Web un aspect plus haut de gamme, et vous pouvez également personnaliser la couleur du dégradé.

Nous pouvons utiliser la propriété Linear-gradient dans CSS3 pour obtenir l'effet de bordures dégradées. L'attribut linéaire-gradient est une fonction de dégradé qui nécessite de définir la couleur, la direction et la position de départ du dégradé.

Exemple de code :

.gradient-border {
  border: 2px solid;
  border-image: linear-gradient(to right top, #ff8177, #ff867a, #ff8c7f, #f99185, #cf556c, #b12a5b, #8b0f4d, #610528) 1;
}

Rendu :

5. Résumé

Cet article présente principalement les connaissances de base sur la définition des bordures avec CSS, y compris le style, la largeur, la couleur de la bordure et les effets tels que les coins arrondis. et les dégradés. Le style de bordure peut être obtenu grâce à de simples paramètres de propriété CSS, et la bordure peut également être personnalisée, ce qui peut rendre la page Web plus unique et plus vivante.

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!