Maison > Article > interface Web > Comment définir une bordure pointillée en CSS ? Exemple de comment définir une bordure en pointillés avec CSS
Comment définir une bordure pointillée en CSS ? Exemple de comment définir une bordure en pointillés avec CSS
- 不言original
- 2018-10-27 10:31:5923609parcourir
Dans la mise en page d'une page Web, il peut parfois être nécessaire de définir une bordure en pointillés pour la beauté de la page Web dans son ensemble. Alors, comment définir une bordure en pointillés ? Cet article vous présentera comment utiliser CSS pour définir une bordure en pointillé.
Tout d'abord, nous devons savoir que la propriété border du CSS est l'attribut border, qui peut obtenir l'effet de bordure d'objet, tel que la définition de la largeur de la bordure, de la couleur de la bordure, du style de la bordure (ligne pleine ou pointillée) , etc.
Regardons de plus près comment définir la ligne de bordure en pointillés à l'aide de l'attribut border de CSS
Les bordures en pointillés et en pointillés peuvent être utilisées pour définir la ligne de bordure en pointillés, mais les ensembles en pointillés les points rectangulaires Lignes pointillées, tandis que pointillé définit les points carrés en lignes pointillées. (Recommandations associées : Manuel d'apprentissage CSS) Examinons ensuite les codes d'implémentation des deux bordures en pointillés.
1. Utilisez des pointillés pour définir la bordure en pointillés.
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: dashed;
}
</style>
</head>
<body>
<div>虚线边框</div>
</body>
</html>L'effet de bordure en pointillés est le suivant :
Si vous souhaitez ajouter de la couleur à la bordure en pointillé et rendre la bordure en pointillé plus fine, vous pouvez faire ceci :
div{
width: 100px;
height: 100px;
border: 2px dashed lightblue;
}L'effet de bordure en pointillé deviendra comme suit :
2. Utilisez pointillé pour définir la bordure en pointillés
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: dotted;
}
</style>
</head>
<body>
<div>虚线边框</div>
</body>
</html>L'effet de bordure pointillée est le suivant :
De même, si vous souhaitez modifier le style de la bordure pointillée ci-dessus, vous pouvez modifier le code comme suit :
div{
width: 100px;
height: 100px;
border: 2px dotted lightblue;
}L'effet de la bordure en pointillés est le suivant :
Cet article se termine ici. Pour un contenu plus passionnant, vous. pouvez prêter attention aux didacticiels des colonnes pertinentes sur le site Web php chinois ! ! !
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!