Comment définir le style de bordure CSS-tutoriel CSS-php.cn

Comment définir le style de bordure CSS

王林

Libérer： 2023-01-03 09:27:43

original

3355 Les gens l'ont consulté

Comment définir le style de bordure en CSS : Vous pouvez utiliser l'attribut border-style pour définir le style de bordure, tel que [p.dotted {border-style:dotted;}], ce qui signifie définir la bordure sur une bordure en pointillés.

Comment définir le style de bordure CSS

L'environnement d'exploitation de cet article : système Windows 10, CSS 3, ordinateur thinkpad t480.

En CSS, si nous voulons définir le style de la bordure, alors nous pouvons utiliser l'attribut border-style. La propriété border-style est utilisée pour définir le style des quatre bordures d'un élément. Cette propriété peut avoir une à quatre valeurs.

Les valeurs d'attribut couramment utilisées sont les suivantes :

dotted définit une bordure en pointillés. S'affiche sous la forme d'une ligne continue dans la plupart des navigateurs.
pointillé définit la ligne pointillée. S'affiche sous la forme d'une ligne continue dans la plupart des navigateurs.
solide Définit une ligne continue.
double définit des lignes doubles. La largeur de la double ligne est égale à la valeur de border-width.

Exemple spécifique :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>

</html>

Copier après la connexion

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

Résultat d'exécution :

Comment définir le style de bordure CSS