So legen Sie einen gepunkteten Rahmen in HTML fest

Verwenden Sie CSS-Stile und HTML-Tag-Elemente

Um verschiedenen HTML-Tags gepunktete Ränder hinzuzufügen, wählen wir mehrere häufig verwendete Tags aus, um sie auszurichten und den gepunkteten Randeffekt festzulegen.

1. Häufig verwendete Tags in HTML

p-Tag

Spanne

ul li

Tabelle tr td

2. Beispiele für verwendete CSS-Eigenschaftswörter

Grenze

Breite

Höhe

3. Wichtige Punkte bei der Implementierung gepunkteter Linien mit CSS

Rahmen ist ein Rahmenattribut. Wenn Sie einen Objektrahmeneffekt erzielen möchten, müssen Sie die Rahmenbreite, Rahmenfarbe und den Rahmenstil (durchgezogene Linie oder gepunktete Linie) festlegen.

border:1px dashed #F00 Dies legt die Breite des Rahmenstils auf 1px, gepunktete Linie fest und die gepunktete Linie ist rot.

4. Beispielbeschreibung

Wir legen für die obigen Beschriftungen die gleiche Breite, Höhe und Rahmenwirkung fest.

5. Vollständiger HTML-Code:

 <!DOCTYPE html> <html>
 <Kopf> <meta charset="utf-8" />
 <title>Demonstration einer gepunkteten HTML-Grenze für www.pcss5.com</title> <style>
 .bor{border:1px gestrichelt #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*CSS-Kommentar: Lass span einen Block bilden*/
 </style> </head>
 <body> <p class="bor">p-Box</p>
 <span class="bor">Spannungsfeld</span> <ul class="bor">
 <li>ul li-Liste</li> <li>ul li-Liste</li>
 </ul> <table class="bor">
 <tr> <td>Tabelle</td>
 <td>Tabelle 2</td> </tr>
 <tr> <td>Daten</td>
 <td>Daten 2</td> </tr>
 </Tabelle> </Body>
 </html>

Das obige Beispiel legt für verschiedene Tags in HTML den gleichen Stil fest, einschließlich der gleichen gestrichelten Rahmenlinie.

6. Screenshots von Browsereffekten

Screenshot zum Festlegen des gestrichelten Rahmeneffekts für verschiedene Tags in HTML

<<: Detaillierter Prozess zur Bereitstellung von MySQL mit Docker (allgemeine Anwendungen, die mit Docker bereitgestellt werden)

>>: Eine andere Art von „Abbrechen“-Button

Eine kurze Diskussion darüber, ob zu viele MySQL-Datenabfragen OOM verursachen

So legen Sie einen gepunkteten Rahmen in HTML fest

Eine kurze Diskussion darüber, ob zu viele MySQL-Datenabfragen OOM verursachen

Detaillierte Erklärung der CSS-Stil-Kaskadierungsregeln

Designtheorie: Die Grundlagen der Schriftgestaltung

Ein Problem mit der Bereitstellung von MySQL 5.5

Tic-Tac-Toe-Spiel in reinem CSS3 implementiert

Beim Hochladen von Bildern mit Axios in Vue sind Probleme aufgetreten

Webinterview: Benutzerdefinierte Vue-Komponenten und Aufrufmethoden

Das Problem „mmx64.efi nicht gefunden“ tritt bei der Installation des Ubuntu18-Dualsystems auf Win10 auf

5 Tipps zum Schreiben von CSS, um Ihren Stil standardisierter zu gestalten

Detaillierte Erklärung des Integer-Datentyps tinyint in MySQL

Artikel empfehlen

So löschen Sie node_modules und installieren es neu

JS implementiert kreisförmiges Ziehen und Schieben des Fortschrittsbalkens

Interpretation und Verwendung verschiedener React-State-Manager

Reines HTML und CSS, um den JD-Karusselleffekt zu erzielen

So verwenden Sie den Nginx-Proxy zum Surfen im Internet

JavaScript zum Implementieren einer einfachen Uhr

Spielen Sie mit der Connect-Funktion mit Timeout in Linux

Vue Grundlagen Listener Detaillierte Erklärung

Berechnungstabelle für die RGBA-Alpha-Transparenzkonvertierung

Detaillierte Erläuterung zweier Möglichkeiten der Linux-Dienstverwaltung: service und systemctl

Fortgeschrittene Techniken zur Verwendung von CSS (im tatsächlichen Kampf verwendet)

Detaillierte Erläuterung der MySQL-Mehrtabellenabfrage

HTML+CSS+JS zur Implementierung des Spiels „Nicht auf das Whiteboard treten“

Zusammenfassung der speziellen Verarbeitungsanweisungen für MySQL-SQL-Anweisungen (unbedingt lesen)

CSS-Float-Eigenschaftsdiagramm, Details der Float-Eigenschaft