Beispielcode zur Implementierung einer QR-Code-Scanbox mit CSS
|
Normalerweise haben wir ein Scan-Feld, wenn wir die Kamera öffnen, und manchmal wird einem statischen QR-Code auch ein Rahmen hinzugefügt, um den Fokus zu erhöhen und das Scannen zu erleichtern. So implementieren Sie einen Rahmen über CSS Wirkung:
Der Code lautet wie folgt: html:
<div Klasse="Bildbox">
<img class="code" src="https://image-static.segmentfault.com/149/570/149570997-5b987cc928d69_articlex">
</div>CSS:
.img-box {
Hintergrund: linearer Farbverlauf (#ae0000, #ae0000) links oben,
linear-gradient(#ae0000, #ae0000) links oben,
linear-gradient(#ae0000, #ae0000) rechts oben,
linear-gradient(#ae0000, #ae0000) rechts oben,
linear-gradient(#ae0000, #ae0000) rechts unten,
linear-gradient(#ae0000, #ae0000) rechts unten,
linear-gradient(#ae0000, #ae0000) links unten,
linearer Gradient (#ae0000, #ae0000) links unten;
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 2px 20px, 20px 2px;
Höhe: 116px;
Breite: 116px;
}
.code {
Höhe: 110px;
Breite: 110px;
Rand oben: 2px;
Rand links: 2px;
Rand: 1px durchgezogen #ae0000;
}
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: So handhaben Sie den Token-Ablauf in WeChat-Miniprogrammen
>>: Implementierung des Tomcat-Bereitstellungsprojekts und Integration mit IDEA
Artikel empfehlen
Beispielcode für ungewöhnliche HTML-Tags „optgroup“, „sub“, „sup“ und „bdo“
Optgroup wird im Auswahltag verwendet, um den Inha...
Erläuterung der neuen Funktion von Hadoop 2.X, der Papierkorbfunktion
Durch Aktivieren der Papierkorbfunktion können Si...
So verwenden Sie die MySQL-Indexzusammenführung
Die Indexzusammenführung ist ein intelligenter Al...
Erstellen eines statischen Jenkins Docker-Agentknotens
Ein statischer Knoten ist auf einer Maschine fixi...
Die Aktualisierung der Seite zur Formularübermittlung springt nicht
1. Quellcode entwerfen Code kopieren Der Code laut...
So implementieren Sie das Strategiemuster in Javascript
Inhaltsverzeichnis Überblick Code-Implementierung...
Professionelles und nicht-professionelles Webdesign
Zunächst einmal hängt die Gestaltung des Webseiten...
Beispielanalyse der Verwendung von GROUP_CONCAT in MySQL
Dieser Artikel beschreibt anhand eines Beispiels ...
Eine kurze Erläuterung der vier häufig verwendeten Speicher-Engines in MySQL
Einführung in vier häufig verwendete MySQL-Engine...
Beispiele für einfache Hinzufügungs-, Lösch-, Änderungs- und Abfragevorgänge mit MySQL-Anweisungen
Dieser Artikel beschreibt anhand von Beispielen, ...
Fügen Sie dem Debian-Docker-Container geplante Crontab-Aufgaben hinzu
Mittlerweile basieren die meisten Docker-Images a...
Ein Beispiel zum Abfragen von Daten in MySQL und zum Aktualisieren dieser Daten in eine andere Tabelle basierend auf Bedingungen
Dieser Artikel beschreibt anhand eines Beispiels,...
So ändern Sie die feste Positionierung untergeordneter Elemente durch CSS3-Transformation in eine absolute Positionierung
In diesem Artikel wird die Methode vorgestellt, m...
Slot-Anordnung und Nutzungsanalyse in Vue
Die Betriebsumgebung dieses Tutorials: Windows 7-...
Domänenübergreifende Probleme bei der Trennung von Front-End und Back-End von Vue+SpringBoot
Bei der getrennten Entwicklung von Front-End und ...