communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > tutoriel CSS > Introduction au style de bordure de boîte CSS

Introduction au style de bordure de boîte CSS

高洛峰

Libérer： 2017-03-04 16:56:50

original

2434 Les gens l'ont consulté

Les styles de bordure incluent des styles de bordure complète et de bordure unique, et différents styles peuvent être définis pour chaque côté

Le code suivant P1 est le style de bordure complète et P2 définit différents styles pour une seule bordure :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css边框样式</title>
    <style>
        #p1{
            background: yellowgreen;
            border:4px dotted rebeccapurple;
            border-radius: 20px;
            width:200px;
            text-align:center;
            padding:5px;
            color:#fff;
            font-weight:bold;
        }
        #p2{
            background: rebeccapurple;
            border:4px dashed skyblue;
            border-radius: 5px;
            width:200px;
            text-align:center;
            padding:5px;
            color:#fff;
            font-weight:bold;
            border-bottom-color: palegreen;
            border-top-style: dotted;
        }
    </style>
</head>
<body>
<p id="p1">这是一段测试文字</p>
<p id="p2">这是一段测试文字</p>
</body>
</html>

Copier après la connexion

Pour plus d'articles liés au style de bordure de boîte CSS, veuillez faire attention au site Web PHP chinois !

Étiquettes associées：

css

source：php.cn

Article précédent：Comment créer une étoile en utilisant CSS3 Article suivant：style de texte CSS et méthode de contrôle de la capitalisation du texte

Déclaration de ce site Web

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

Derniers articles par auteur