Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Rahmen spielen
RahmenstilDie Eigenschaft „Border-Style“ gibt an, welche Art von Rahmen angezeigt werden soll. Das Attribut border-style wird verwendet, um den Stil des Rahmens zu definieren Demonstration des Wertecodes im Rahmenstil:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Shuixiang Muyus Blog</title>
<Stil>
p.keine {
Rahmenstil: keiner;
}
p.gepunktet {
Rahmenstil: gepunktet;
}
p.gestrichelt {
Rahmenstil: gestrichelt;
}
p.fest {
Rahmenstil: durchgezogen;
}
p.doppelt {
Rahmenstil: doppelt;
}
p.Nut {
Rahmenstil: Rille;
}
p.ridge {
Rahmenstil: Grat;
}
p.einfügung {
Rahmenstil: Einschub;
}
p.Ausgangspunkt {
Rahmenstil: Anfang;
}
p.versteckt {
Rahmenstil: versteckt;
}
</Stil>
</Kopf>
<Text>
<div>
<p class="none">Keine Grenze. </p>
<p class="dotted">Gepunkteter Rand. </p>
<p class="dashed">Gestrichelter Rand. </p>
<p class="solid">Durchgezogener Rand. </p>
<p class="double">Doppelter Rand. </p>
<p class="groove"> Rillenrand. </p>
<p class="ridge">Kammgrenze. </p>
<p class="inset">Rand einfügen. </p>
<p class="outset">Außenrand. </p>
<p class="hidden">Rand ausblenden. </p>
</div>
</body>
</html>Wirkungsdemonstration:
Rahmenbreite Mit Es gibt zwei Möglichkeiten, die Breite des Rahmens anzugeben: Sie können einen Längenwert wie 2px oder 0,1em angeben (in Einheiten von px, pt, cm, em usw.) oder eines der drei Schlüsselwörter „thick“, „medium“ (Standard) und „thin“ verwenden. Hinweis: CSS definiert keine spezifischen Breiten für die drei Schlüsselwörter. Ein Benutzer kann daher „dick“, „mittel“ und „dünn“ auf 5px, 3px bzw. 2px festlegen, während ein anderer Benutzer sie auf 3px, 2px bzw. 1px festlegen kann.
p.eins {
Rahmenstil: durchgezogen;
Rahmenbreite: 5px;
}
S. zwei {
Rahmenstil: durchgezogen;
Rahmenbreite: mittel;
}RahmenfarbeMit der Eigenschaft „Border-Color“ wird die Farbe des Rahmens festgelegt. Die einstellbaren Farben sind:
Sie können die Rahmenfarbe auch auf „transparent“ einstellen. Hinweis: Die Rahmenfarbe allein funktioniert nicht. Sie müssen zuerst den Rahmenstil mit dem Rahmenstil festlegen.
p.eins{
Rahmenstil: durchgezogen;
Rahmenfarbe: rot;
}
S. zwei {
Rahmenstil: durchgezogen;
Rahmenfarbe: #98bf21;
}Ränder - jede Seite einzeln festlegen In CSS können Sie für verschiedene Seiten unterschiedliche Ränder angeben:
P {
Rahmen-Oberteil-Stil: gepunktet;
Rahmen-rechts-Stil: durchgezogen;
Rahmen unten im Stil: gepunktet;
Rahmen-links-Stil: durchgezogen;
}Im obigen Beispiel kann auch eine einzelne Eigenschaft festgelegt werden: Beispiele Rahmenstil: gepunktet, durchgezogen; Die Eigenschaft „Border-Style“ kann 1-4 Werte haben: Rahmenstil: gepunktet, durchgezogen, doppelt gestrichelt;
Rahmenstil: gepunktet, durchgezogen, doppelt;
Rahmenstil: gepunktet, durchgezogen;
Rahmenstil: gepunktet;
Das obige Beispiel verwendet den Rahmenstil. Es kann jedoch auch zusammen mit border-width und border-color verwendet werden. Rahmen – Kurzeigenschaften Im obigen Beispiel werden eine Reihe von Eigenschaften zum Festlegen des Rahmens verwendet. Sie können die Grenze auch in einer Eigenschaft festlegen. Sie können es in der Eigenschaft „Border“ festlegen:
Rand: 5px durchgehend rot;
Dies ist das Ende dieses Artikels, in dem wir Ihnen beigebracht haben, wie Sie CSS-Rahmen verwenden. Weitere CSS-Rahmeninhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Farbabstimmungstechniken und Effektdarstellung für Beauty- und Styling-Websites
>>: MySQL sollte niemals Update-Anweisungen wie diese schreiben
Artikel empfehlen
So ermitteln Sie die Ausführungszeit eines Befehls oder Prozesses in Linux
Auf Unix-ähnlichen Systemen wissen Sie möglicherw...
So steigern Sie Ihre Web-Performance um das Dreifache, indem Sie einen Parameter in Nginx aktivieren
1. Einige aufgetretene Probleme Ich erinnere mich...
So installieren Sie WSL2 Ubuntu20.04 unter Windows 10 und richten die Docker-Umgebung ein
WSL aktivieren Stellen Sie sicher, dass das Syste...
Beispiel für einen WeChat-Applet-Rechner
Beispiel für einen WeChat-Applet-Rechner. Zu Ihre...
Organisationsstruktur der Vue-Komponente und Details zur Komponentenregistrierung
Inhaltsverzeichnis 1. Komponentenorganisation 2. ...
Detaillierte Erklärung des HTML-Bereichs-Tags
Der <area>-Tag definiert einen Bereich in e...
So reduzieren Sie die Speicher- und CPU-Auslastung von Webseiten
<br />Einige Webseiten sehen nicht groß aus,...
Detaillierte Erklärung, wie Zabbix den Master-Slave-Status von MySQL überwacht
Nach dem Einrichten des MySQL-Master-Slaves wisse...
Methoden zum lokalen Sichern von Windows Server-Dateien, Lösungen zum Sichern von Windows Server-Daten
Wichtige Daten müssen gesichert werden, und zwar ...
So lösen Sie das Problem, das Root-Passwort von Mysql auf dem Mac zu vergessen
Ich habe MySQL auf meinem Computer längere Zeit n...
Grundlegende Verwendung von benutzerdefinierten Anweisungen in Vue
Inhaltsverzeichnis Vorwort Text 1. Globale Regist...
Schreibreihenfolge und Namenskonventionen sowie Vorsichtsmaßnahmen im CSS-Stil
Die Bedeutung der Schreibreihenfolge Reduzieren S...
Mysql-Indextypen und grundlegende Anwendungsbeispiele
Inhaltsverzeichnis Index - Allgemeiner Index - Ei...
Probleme und Erfahrungen bei der Webentwicklung
<br />Nachfolgend sind die Probleme aufgefüh...
Implementierung der benutzerdefinierten MySQL-Listensortierung nach angegebenen Feldern
Problembeschreibung Wie wir alle wissen, lautet d...