Comment définir le style de ligne pointillée de la bordure en CSS ? (exemple de code)

Dans la mise en page d'une page Web, nous devons parfois définir différents styles de bordure pour la beauté de la page Web dans son ensemble. Alors, comment définir le style de ligne pointillée de la bordure ? Cet article vous présentera deux façons de définir le style de ligne pointillée de bordure en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d'abord, il faut savoir qu'en CSS on utilise l'attribut border pour définir la bordure. Il peut définir la largeur, la couleur, la rondeur, le style (ligne continue, ligne pointillée, ligne double, etc.) de la frontière.

Ci-dessous, nous utilisons un exemple de code simple pour voir en détail comment l'attribut border du CSS définit la ligne pointillée de la bordure.

Code html :

<div class="demo">
	<p class="p1">这是一段测试文字1，实现虚线边框</p>
	<p class="p2">这是一段测试文字2，实现虚线边框</p>

</div>

Code css :

	.p1 {
	border: 5px dashed #009999;
	padding: 10px;
}

.p2 {
	border: 5px dotted;
	border-color: linear-gradient(to right, red, yellow, blue);
	padding: 10px;

Rendu :

Nous pouvons voir que l'attribut css border border peut définir deux styles de ligne pointillée différents pour la bordure, qui sont définis via les deux valeurs d'attribut pointillé et pointillé dans l'attribut border. Jetons un coup d'œil à l'effet de la définition de la bordure sur ces deux valeurs d'attribut :

valeur en pointillé : vous pouvez définir une ligne pointillée afin que la bordure puisse avoir un style de ligne pointillée plate.

valeur pointillée : définissez une bordure en pointillés pour que la bordure apparaisse sous une forme pointillée continue, obtenant ainsi un style de ligne pointillée en pointillé de la bordure.

Remarque : tous les navigateurs prennent en charge l'attribut border, alors ne vous inquiétez pas de la compatibilité.

Résumé : ci-dessus sont les deux méthodes CSS pour définir le style de ligne pointillée de bordure présentées dans cet article. Vous pouvez l'essayer vous-même et utiliser différents styles de ligne pointillée en fonction de vos besoins. votre apprentissage.

Recommandations associées :

Comment définir le style des coins arrondis de la bordure en CSS ? La propriété border-radius définit le style des coins arrondis

Comment supprimer la bordure qui se chevauche avec 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!