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>Copier après la connexion
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;}Copier après la connexion
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
