Maison > Article > interface Web > Utilisez intelligemment le code CSS pour créer un tableau arrondi

Utilisez intelligemment le code CSS pour créer un tableau arrondi

小云云original: 2017-11-16 16:15:422585parcourir

Nous savons tous que CSS est une feuille de style en cascade (nom complet anglais : Cascading Style Sheets), qui est utilisée pour exprimer HTML (une application du langage de balisage généralisé standard) ou XML (un sous-ensemble du langage de balisage généralisé standard) Ordinateur langue pour les formats de fichiers. CSS peut non seulement modifier statiquement les pages Web, mais peut également coopérer avec divers langages de script pour formater dynamiquement divers éléments des pages Web.

Alors aujourd'hui, je vais vous apprendre une petite astuce pour utiliser le code CSS pour créer un tableau arrondi. Bien sûr, vous pouvez également créer un div arrondi. L'effet de

est le suivant :

Utilisez intelligemment le code CSS pour créer un tableau arrondi

<html xmlns="http://www.phpernote.com">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS打造圆角Table</title>
<style type="text/css">
div.RoundedCorner{background:#9BD1FA;width:260px;}
b.rtop, b.rbottom{display:block;background:#FFF}
b.rtop b, b.rbottom b{display:block;height:1px;overflow:hidden; background:#9BD1FA}
b.r1{margin:0 5px}
b.r2{margin:0 3px}
b.r3{margin:0 2px}
b.rtop b.r4, b.rbottom b.r4{margin:0 1px;height:2px}
</style>
</head>
<body>
    <div class="RoundedCorner">
        <b class="rtop">
            <b class="r1"></b>
            <b class="r2"></b>
            <b class="r3"></b>
            <b class="r4"></b>
        </b>
        <table style="width:100%;height:100px;">
            <tr>
               <td>单元格1</td>
               <td>phpernote.com</td>
            </tr>
            <tr>
               <td>单元格3</td>
               <td>单元格4</td>
            </tr>
        </table>
        <b class="rbottom">
            <b class="r4"></b>
            <b class="r3"></b>
            <b class="r2"></b>
            <b class="r1"></b>
        </b>
    </div>
</body>
</html>

CSS peut effectuer un contrôle précis au niveau des pixels de la disposition des positions des éléments dans les pages Web, et prend en charge presque toutes les tailles et styles de police, avec la possibilité de modifier les objets de page Web et les styles de modèle. Que nous apprenions le front-end ou le back-end, nous devons tous maîtriser les connaissances de base en CSS. J'espère que le petit tutoriel ci-dessus sur la création de tableaux arrondis avec CSS sera utile à tout le monde.

Recommandations associées :

Tutoriel de dessin graphique simple CSS3

Exemple de la façon dont CSS implémente le dégradé de couleurs du texte

Un exemple d'utilisation de CSS pour réaliser le mouvement circulaire d'une petite balle

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：Exemple de la façon dont CSS implémente le dégradé de couleurs du texteArticle suivant：Exemple de la façon dont CSS implémente le dégradé de couleurs du texte

Articles Liés

Voir plus