Heim > Artikel > Web-Frontend > H5-Mobilterminal, super praktischer CSS3-simulierter Rand, neuester Forschungsbeispielcode

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

黄舟Original: 2017-03-10 16:54:221881Durchsuche

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>

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;}

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

kann nur zwei Werte festlegen, sodass es keine Erweiterung, keine Unschärfe und eine Eins-zu-Eins-Bewegung gibt 🎜>
box-shadow
box-shadow
Bei Verwendung abgerundeter Ecken. Es sind jedenfalls bessere Berechnungen erforderlich.
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!

Stellungnahme：

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

Vorheriger Artikel：Ausführliche Erläuterung des Beispielcodes zum Erstellen einer unbegrenzten Anzahl von Bannerschaltflächen auf dem H5-MobilterminalNächster Artikel：Ausführliche Erläuterung des Beispielcodes zum Erstellen einer unbegrenzten Anzahl von Bannerschaltflächen auf dem H5-Mobilterminal

In Verbindung stehende Artikel

Mehr sehen