Comment ajouter quatre côtés de bordure CSS-tutoriel CSS-php.cn

Comment ajouter quatre côtés de bordure CSS

藏色散人

Libérer： 2023-01-04 09:38:37

original

4571 Les gens l'ont consulté

Comment définir les quatre côtés de la bordure avec CSS : 1. Utilisez l'attribut border-bottom pour définir la bordure inférieure ; 2. Utilisez l'attribut border-left pour définir la bordure gauche ; attribut border-right pour définir la bordure droite ; 4. Utilisez border L'attribut -top définit la bordure supérieure.

Comment ajouter quatre côtés de bordure CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version css3, ordinateur Dell G3.

Recommandations associées : "Tutoriel vidéo CSS"

Comment ajouter quatre côtés d'une bordure CSS ?

1. Utilisez l'attribut border pour définir les styles de quatre bordures à la fois

border : définissez tous les attributs de bordure dans une seule instruction.

Attributs de bordure réglables :

border-width : spécifiez la largeur de la bordure

border-style : spécifiez le style de bordure

border-color : spécifiez le Border Color

Exemple : Définir quatre styles de bordure

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p
{
border:5px solid red;
}
</style>
</head>
<body>
<p>段落中的一些文本。</p>
</body>
</html>

Copier après la connexion

Rendu :

Comment ajouter quatre côtés de bordure CSS

2. Utilisez border-bottom, border-left, border -right et border-top définissent respectivement les styles de quatre bordures

border-bottom : définit toutes les propriétés de la bordure inférieure dans une seule instruction.

border-left : Définissez toutes les propriétés de la bordure gauche dans une seule instruction.

border-right : définissez toutes les propriétés de bordure droite dans une seule instruction.

border-top : Définissez toutes les propriétés de bordure supérieures dans une seule instruction.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p 
{
border-bottom:thick dotted #ff0000;
border-left:thick solid #ff0000;
border-top:thick dashed #ff0000;
border-right:thick double #ff0000;
}
</style>
</head>
<body>
<p>段落中的一些文本。</p>
</body>
</html>

Copier après la connexion

Rendu :

Comment ajouter quatre côtés de bordure CSS