Maison > Article > interface Web > Comment définir une bordure pointillée en CSS

Comment définir une bordure pointillée en CSS

青灯夜游original: 2021-07-07 18:02:485403parcourir

Vous pouvez utiliser l'attribut border-top-style en CSS pour définir la bordure en pointillés. Il vous suffit d'ajouter le style "border-top-style:dashed;" à l'élément. L'attribut border-top-style peut définir le style de bordure supérieure de l'élément. Lorsque la valeur est en pointillés, le style de ligne pointillée peut être défini.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, vous pouvez utiliser l'attribut border-top-style pour définir la bordure en pointillés.

L'attribut border-top-style peut définir le style de bordure supérieure de l'élément. Lorsque la valeur est en pointillés, le style de ligne pointillée peut être défini.

Jetons un coup d'œil à l'exemple de code ci-dessous :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.dashed {border-top-style:dashed;}
</style>
</head>
<body>
<p class="dashed">虚线上边框样式</p>
</body>
</html>

Rendu :

Comment définir une bordure pointillée en CSS

Connaissances étendues : les valeurs que l'attribut border-top-style peut être défini

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。

(Partage de vidéos 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

Article précédent：Comment implémenter des lignes verticales en CSSArticle suivant：Comment implémenter des lignes verticales en CSS

Articles Liés

Voir plus