Maison >interface Web >tutoriel CSS >Comment définir la largeur de la bordure en CSS
Comment définir la largeur de la bordure en CSS
- 青灯夜游original
- 2021-04-21 16:21:0611678parcourir
En CSS, vous pouvez utiliser l'attribut border-width pour définir la largeur de la bordure. Le format de syntaxe est "border-width:keyword | value with length unit;" où le mot-clé peut être fin ( fine) bordure), moyenne (bordure moyenne), épaisse (bordure épaisse).
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
css définit la largeur de la bordure
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:thick;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
</body>
</html>Rendu :
Instructions :
L'attribut "border-width" ne fonctionnera pas s'il est utilisé seul. Vous devez d'abord utiliser l'attribut "border-style" pour définir la bordure.
Propriété CSS border-width
La propriété border-width définit la largeur des quatre bordures d'un élément.
Valeur de l'attribut :
| 值 | 描述 |
|---|---|
| thin | 定义细的边框。 |
| medium | 默认。定义中等的边框。 |
| thick | 定义粗的边框。 |
| length | 允许您自定义边框的宽度。 |
L'attribut border-width peut avoir une à quatre valeurs.
Exemple :
border-width:thin medium thick 10px;
La bordure supérieure est une bordure fine
-
La bordure droite est une bordure moyenne
La bordure inférieure est une bordure épaisse
La bordure gauche est une bordure de 10 px de large
border-width:thin medium thick;
Bordure supérieure C'est une bordure fine
Les bordures droite et gauche sont des bordures moyennes
La bordure inférieure est une bordure épaisse
border-width:thin medium;
Les bordures supérieure et inférieure sont des bordures fines
-
Les bordures droite et gauche sont des bordures moyennes
border-width:thin;
Les 4 bordures sont de fines bordures
(Partage vidéo d'apprentissage : tutoriel vidéo CSS)
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!