Maison > Article > interface Web > Terminal mobile H5 super pratique, simulation de frontière css3, dernier code d'échantillon de recherche

Terminal mobile H5 super pratique, simulation de frontière css3, dernier code d'échantillon de recherche

黄舟original: 2017-03-10 16:54:221933parcourir

Le dernier exemple de code de recherche de bordure de simulation CSS3 super pratique pour le terminal mobile H5

Avant-propos

Dans un article de blog précédent "Mobile Dans "Résumé de quelques points de connaissances de base de H5 dans la section 5 : Traitement des frontières", j'ai mentionné que vous pouvez utiliser box-shadow:0 0 0 1px #ddd; pour simuler des frontières. Bien sûr, le contenu de l'article de blog n'est pas faux, mais il a certaines limites. Sexe. Par conséquent, ici aujourd'hui, je vais corriger et améliorer les défauts de mon précédent article de blog

Pourquoi simuler la bordure au lieu d'écrire la bordure directement
Parce que la frontière doit calculer le modèle de boîte. Et nous pouvons utiliser une disposition adaptative sur le terminal mobile. Il est très laborieux de calculer la frontière
. Par conséquent, en utilisant la méthode de simulation des bordures, vous n’avez pas besoin de considérer la largeur de la bordure, ce qui est plus pratique
. Bien sûr, vous pouvez également utiliser des attributs comme box-sizing:border-box pour exclure la bordure de l'inclusion dans le modèle de boîte
. Et cette méthode est utilisée dans de nombreux frameworks CSS modernes
. Mais personnellement, je ne recommande pas cette approche car le rembourrage n'est pas inclus dans le modèle de boîte
. Quoi qu'il en soit, je n'aime pas cette approche. J'ai donc simulé la frontière !

Revue de l'article précédent

Si vous ne souhaitez pas ouvrir le lien ci-dessus, lisez quoi. est dit dans le billet de blog précédent Quoi. Ici, je vais résumer les deux méthodes de simulation clés. Si vous ne comprenez pas, vous pouvez le lire. Si vous comprenez, lisez simplement le contenu suivant. Méthode 1

Simulation de bordure

outline Utilisez pour simuler la bordure

outline: 1px solid #ddd;Avantages :

Vous pouvez utiliser différentes méthodes comme . 🎜> Linéaire 2. Vous pouvez ajuster la distance entre la bordure et la boîte
Paramètres border
outline-offsetInconvénients :

1. ceci est considéré par le W3C comme un BUG, peut être corrigé dans un avenir proche) 2 Il ne peut être ajouté qu'à quatre côtés à la fois, pas seulement à un côté.

Méthode 2.

Simuler la bordure

box-shadowUtiliser la bordure de simulation de lueur extérieure

box-shadow:0 0 0 1px #ddd;Avantages :

Peut s'adapter aux éléments de coins arrondis pour générer un parfait. border2. Peut répéter les paramètres, générer plusieurs bordures

Inconvénients :

1. Uniquement des lignes linéaires pleines, pas de lignes pointillées Pour plus d'informations, veuillez consulter mon article de blog précédent ou les informations relatives à Baidu.

Vous pouvez simuler des frontières de n'importe quel côté

Au départ, je pensais que c'était impossible, cela montre que mes compétences CSS ne sont pas fortes. assez, et je dois étudier dur.`box-shadow`

La dernière fois, je n'avais rien à faire et j'ai écrit un ensemble de tableaux alphanumériques en utilisant un p pour afficher la DÉMO Bien que j'aie utilisé des points de connaissances pertinents, je ne m'y suis toujours pas appuyé. l'idée de simuler des frontières.

En y réfléchissant bien aujourd'hui, il s'avère que

peut simuler n'importe laquelle des quatre arêtes. C'est pourquoi j'ai écrit ce billet de blog

Il y a trop de langues, il vaut donc mieux regarder le code directement :

box-shadowcode html

code CSS

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <p class="box sibian"></p>
    <p class="box shangbian"></p>
    <p class="box xibian"></p>
    <p class="box zuobian"></p>
    <p class="box youbian"></p>
    <p class="box zuoshangbian"></p>
    <p class="box youshangbian"></p>
    <p class="box zuoxiabian"></p>
    <p class="box youxiabian"></p>
    <p class="box wushangbian"></p>
    <p class="box wuyoubian"></p>
    <p class="box wuxiabian"></p>
    <p class="box wuzuobian"></p></body></html>

Voir box-shadow simulé border DEMO

.box {width: 100px;
height: 100px;background: #f00; 
margin: 50px;float: left;}
.sibian {box-shadow: 0 0 0 5px #000;}
.shangbian {box-shadow: 0 -5px #000;}
.xibian {box-shadow: 0 5px #000;}
.zuobian {box-shadow: -5px 0 #000;}
.youbian {box-shadow: 5px 0 #000;}
.zuoshangbian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000;}
.youshangbian {box-shadow: 5px -5px #000,5px 0 #000,0 -5px #000;}
.zuoxiabian {box-shadow: -5px 5px #000,-5px 0 #000,0 5px #000;}
.youxiabian {box-shadow: 5px 5px #000,5px 0 #000,0 5px #000;}
.wushangbian {box-shadow: 5px 5px #000,5px 0 #000,0 5px #000,-5px 5px #000,-5px 0 #000;}
.wuyoubian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000,-5px 5px #000,0 5px #000;}
.wuxiabian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000,5px -5px #000,5px 0 #000;}
.wuzuobian {box-shadow: 5px -5px #000,5px 0 #000,0 -5px #000,5px 5px #000,0 5px #000;}

Résumé

profite de la répétabilité illimitée des attributs de

, qui peuvent être remplis en continu pour répondre à nos besoins.

box-shadowEt,
ne peut définir que deux valeurs afin qu'il n'y ait pas d'expansion, pas de flou et de mouvement un à un.
box-shadow existe toujours, c'est-à-dire qu'il ne peut simuler que des lignes pleines, pas des lignes pointillées
Dans l'utilisation de coins arrondis, de meilleurs calculs. sont nécessaires. Quoi qu'il en soit, il s'agit d'utiliser les caractéristiques de plusieurs superpositionsbox-shadow
Pour faire une bordure de 1px, c'est le plus simple.

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：Explication détaillée de l'exemple de code pour créer un nombre illimité de boutons de bannière sur le terminal mobile H5Article suivant：Explication détaillée de l'exemple de code pour créer un nombre illimité de boutons de bannière sur le terminal mobile H5

Articles Liés

Voir plus