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
Prototyp und Prototypenkette Prototyp und Protodetails
Inhaltsverzeichnis 1. Prototyp 2. Prototypenkette...
So verwenden Sie IDEA zum Konfigurieren von Tomcat und Erstellen von JSP-Dateien
Bevor Sie idea zum Schreiben von JSP-Dateien verw...
Der Unterschied zwischen der Übermittlungsaktion eines HTML-Formulars und dem Sprung zur URL
Die Aktion des Formulars unterscheidet sich vom UR...
Implementierung des MySQL Shell import_table-Datenimports
Inhaltsverzeichnis 1. Einführung in import_table ...
Detaillierte Erklärung zur Verwendung des at-Befehls für einmalig geplante Aufgaben in Linux
Inhaltsverzeichnis Vorwort 1. Einführung in einma...
Mehrere Implementierungsmethoden der Tab-Leiste (empfohlen)
Registerkarten: Kategorie + Beschreibung Tag-Leis...
So verwenden Sie LibreOffice zum Konvertieren von Dokumentformaten unter CentOS
Die Projektanforderungen erfordern eine gewisse V...
Detaillierte Erklärung der Befehle zur Berechtigungsverwaltung in Linux (chmod/chown/chgrp/unmask)
Inhaltsverzeichnis chmod Beispiel Besonderes Auge...
Beheben Sie den Nginx-Fehler „504 Gateway Time-out“
Studenten, die Websites erstellen, stellen häufig...
Natives JS implementiert regelmäßige Validierung des Formulars (Senden erst nach Validierung)
Folgende Funktionen sind implementiert: 1. Benutz...
Verwenden von CSS zur Implementierung von Bildrahmenanimationen und Kurvenbewegungen
Das Grundprinzip aller Animationen besteht darin,...
Beispielcode zur Implementierung eines 3D-Rotationseffekts mit reinem CSS
Verwenden Sie hauptsächlich die Eigenschaften „pr...
Docker-Compose erstellt eine Brücke, fügt ein Subnetz hinzu und löscht eine Netzwerkkarte
1. Erstellen Sie eine Docker-Netzwerkkarte [root@...
Super ausführliches Tutorial zur Installation und Bereitstellung von mysql-canal-rabbitmq
Inhaltsverzeichnis 1.1. MySQL-Binlog aktivieren 1...
Probleme und Vorsichtsmaßnahmen beim Festlegen von maxPostSize für Tomcat
1. Warum maxPostSize festlegen? Der Tomcat-Contai...