Comment définir une bordure pointillée en CSS ? Exemple de comment définir une bordure en pointillés avec CSS-tutoriel CSS-php.cn

Comment définir une bordure pointillée en CSS ? Exemple de comment définir une bordure en pointillés avec CSS

不言

Libérer： 2018-10-27 10:31:59

original

23692 Les gens l'ont consulté

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>

Copier après la connexion

L'effet de bordure en pointillés est le suivant :

Comment définir une bordure pointillée en CSS ? Exemple de comment définir une bordure en pointillés avec CSS

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;
    }

Copier après la connexion

L'effet de bordure en pointillé deviendra comme suit :

Comment définir une bordure pointillée en CSS ? Exemple de comment définir une bordure en pointillés avec CSS

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>

Copier après la connexion

L'effet de bordure pointillée est le suivant :

Comment définir une bordure pointillée en CSS ? Exemple de comment définir une bordure en pointillés avec CSS

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;
    }

Copier après la connexion

L'effet de la bordure en pointillés est le suivant :

Comment définir une bordure pointillée en CSS ? Exemple de comment définir une bordure en pointillés avec CSS

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!