简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > H5-Tutorial > Hauptteil

H5-Mobilterminal, super praktischer CSS3-simulierter Rand, neuester Forschungsbeispielcode

黄舟
Freigeben： 2017-03-10 16:54:22
Original
1921 Leute haben es durchsucht

Der neueste Forschungsbeispielcode einer superpraktischen CSS3-Simulationsgrenze für H5-Mobilterminal

Vorwort

In einem früheren Blogbeitrag „Mobile In „Zusammenfassung einiger grundlegender Wissenspunkte von H5 in Abschnitt 5: Grenzverarbeitung“ habe ich erwähnt, dass Sie box-shadow:0 0 0 1px #ddd; zur Simulation von Grenzen verwenden können. Natürlich ist der Inhalt im Blog-Beitrag nicht falsch, weist jedoch bestimmte Einschränkungen auf. Deshalb korrigiere und verbessere ich heute die Fehler in meinem vorherigen Blog-Beitrag

Warum den Rand simulieren, anstatt ihn direkt zu schreiben? Weil der Rand das Boxmodell berechnen muss und wir möglicherweise ein adaptives Layout auf dem mobilen Endgerät verwenden Daher müssen Sie bei der Simulation von Rändern die Breite des Randes nicht berücksichtigen, was praktischer ist
Natürlich können Sie auch Attribute wie
verwenden, um den Rand von der Einbeziehung in das Boxmodell auszuschließen Und diese Methode wird in vielen modernen CSS-Frameworks verwendet
Ich persönlich empfehle diesen Ansatz jedoch nicht, da keine Polsterung im Box-Modell enthalten ist box-sizing:border-box Jedenfalls gefällt mir dieser Ansatz nicht. Also habe ich die Grenze simuliert!


Rezension des vorherigen Artikels

Wenn Sie den Link oben nicht öffnen möchten, lesen Sie was wird im vorherigen Blog-Beitrag gesagt. Hier werde ich die beiden wichtigsten Simulationsmethoden zusammenfassen. Wenn Sie es verstehen, lesen Sie einfach den folgenden Inhalt Methode 1

Simulationsgrenze

Verwenden Sie

, um die Grenze zu simulieren outlineVorteile:

1 Sie können verschiedene Methoden wie outline: 1px solid #ddd;Linear

2. Sie können den Abstand vom Rand zum Feld anpassen

Nachteile:
border1. Dies wird vom W3C als Fehler angesehen, der möglicherweise in naher Zukunft behoben wird.
2. Sie können es nur auf vier Seiten gleichzeitig hinzufügen outline-offset

Methode 2 Ränder simulieren

Verwenden Sie

äußeren Glühsimulationsrand

box-shadowVorteile:

1 Kann Elemente mit abgerundeten Ecken anpassen, um eine zu erzeugen perfekter Rand

2. Kann Parameter wiederholen, mehrere Ränder erzeugen box-shadow:0 0 0 1px #ddd;

Nachteile: 1. Nur durchgezogene lineare Linien, keine gepunkteten Linien

Weitere Informationen , siehe meinen vorherigen Blog-Beitrag oder Baidu-bezogene Informationen.

Sie können Ränder auf jeder Seite simulieren
Ich dachte ursprünglich, das sei unmöglich stark genug, und ich muss hart lernen.

Das letzte Mal hatte ich nichts zu tun und habe eine Reihe alphanumerischer Tabellen mit einem p geschrieben, um die DEMO anzuzeigen, aber ich habe mich immer noch nicht darauf verlassen über die Idee, Grenzen zu simulieren.

Wenn ich heute sorgfältig darüber nachdenke, stellt sich heraus, dass box-shadow jede der vier Kanten simulieren kann. Deshalb habe ich diesen Blogbeitrag geschrieben

Es gibt zu viele Sprachen, daher ist es besser, sich den Code direkt anzusehen:

HTML-Code

box-shadowCSS-Code

Box-Shadow-simulierte Grenze DEMO anzeigen

<!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>
Nach dem Login kopieren

Zusammenfassung

.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;}
Nach dem Login kopieren

nutzt das Attribut von , das unbegrenzt wiederholt und kontinuierlich gefüllt werden kann

    Und
  1. kann nur zwei Werte festlegen, sodass es keine Erweiterung, keine Unschärfe und eine Eins-zu-Eins-Bewegung gibt 🎜>

    box-shadow

    2. existiert immer noch, das heißt, es kann nur durchgezogene Linien simulieren, keine gepunkteten Linien

  2. box-shadow

    Bei Verwendung abgerundeter Ecken. Es sind jedenfalls bessere Berechnungen erforderlich.

  3. box-shadowUm einen 1-Pixel-Rand zu erstellen, ist es am einfachsten.

Das obige ist der detaillierte Inhalt vonH5-Mobilterminal, super praktischer CSS3-simulierter Rand, neuester Forschungsbeispielcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
HTML5，CSS3，模拟边框
Quelle：php.cn
Vorheriger Artikel：Ausführliche Erläuterung des Beispielcodes zum Erstellen einer unbegrenzten Anzahl von Bannerschaltflächen auf dem H5-Mobilterminal Nächster Artikel：So implementieren Sie die rechte Ausrichtung von Datum und Titel im Li-Tag
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
2
1730
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
10
1885
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1597
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1510
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1547
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！