Maison  >  Article  >  interface Web  >  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:0611639parcourir

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).

Comment définir la largeur de la bordure en CSS

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 :

Comment définir la largeur de la bordure en CSS

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn