Maison >interface Web >tutoriel CSS >Comment ajouter quatre côtés de bordure CSS
Comment ajouter quatre côtés de bordure CSS
- 藏色散人original
- 2021-01-05 10:34:414633parcourir
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.
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>Rendu :
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>Rendu :
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!