Maison > Article > interface Web > Deux façons d'implémenter le style de ligne pointillée CSS : en pointillés et en pointillés (exemple)

Deux façons d'implémenter le style de ligne pointillée CSS : en pointillés et en pointillés (exemple)

不言original: 2018-07-16 10:23:4811501parcourir

Comment faire une bordure pointillée CSS ? Lors de la définition de la bordure pointillée HTML, vous pensez généralement au solide dans la bordure. Solid est le plus susceptible d'être utilisé dans la mise en page Web HTML. Si vous souhaitez avoir l'effet d'une ligne pointillée CSS, vous pouvez également utiliser une image comme image. arrière-plan, mais ce n'est pas recommandé. Essayez d'utiliser le style de ligne pointillée CSS pour obtenir l'effet de ligne pointillée Ensuite, le style de ligne pointillée CSS est en pointillés et en pointillés dans la bordure. ils sont différents. Veuillez consulter l'exemple suivant de démonstration d'utilisation du code de bordure en pointillé CSS.

Première méthode d'implémentation du style de ligne pointillée CSS : ligne pointillée en pointillé

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dotted虚线</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dotted #000;
}
</style>
</head>
<body>
<div class="box">大家好，我是dotted虚线！</div>
</body>
</html>

Effet d'affichage de la ligne pointillée en pointillé :

Deux façons dimplémenter le style de ligne pointillée CSS : en pointillés et en pointillés (exemple)

style de ligne pointillée CSS 2 : ligne pointillée pointillée

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dashed虚线</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dashed #000;
}
</style>
</head>
<body>
<div class="box">大家好，我是dashed虚线！</div>
</body>
</html>

effet d'affichage de la ligne pointillée pointillée :

Deux façons dimplémenter le style de ligne pointillée CSS : en pointillés et en pointillés (exemple)

La différence entre pointillé et pointillé dans la bordure de style pointillé CSS :

tiret : vient du tiret (tiret), une ligne pointillée composée de tiret

pointillé : À partir d'un point (point), une ligne pointillée composée de points, également appelée ligne pointillée

La démonstration ci-dessus permet aussi de voir intuitivement leur différence

Connexe recommandations :

Tutoriels d'exemples de lignes pointillées CSS courantes

Comment écrire une bordure pointillée 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!

css html dash border

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

Article précédent：Comment utiliser CSS pour implémenter un cadre d'avatar circulaireArticle suivant：Comment utiliser CSS pour implémenter un cadre d'avatar circulaire

Articles Liés

Voir plus