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
MySQL-Serie Multi-Table Join Abfrage 92 und 99 Syntaxbeispiele ausführliches Tutorial
Inhaltsverzeichnis 1. Kartesisches Produktphänome...
MySQL-Lösung zur Verschlüsselung ganzer Tabellen, keyring_file, detaillierte Erläuterung
veranschaulichen MySql Community Edition unterstü...
Detaillierte Erklärung der Angular-Komponentenprojektion
Inhaltsverzeichnis Überblick 1. Einfaches Beispie...
Neues CSS3-Layout: ausführliche Flex-Erklärung
Flex-Grundkonzepte Flex-Layout (Flex ist die Abkü...
Zwei Möglichkeiten zur Installation von Python3 auf Linux-Servern
Erste Methode Alibaba Cloud- und Baidu Cloud-Serv...
Medienabfrage kombiniert mit Rem-Layout in CSS3 zur Anpassung an mobile Bildschirme
CSS3-Syntax: (1rem = 100px für ein 750px-Design) ...
Detaillierte Erklärung der neuen Funktion ROLE in MySQL 8
Welche Probleme löst MySQL ROLE? Wenn Sie ein DBA...
Lösung für das Problem, dass die Umleitung der Crontab-Ausgabe unter Linux nicht wirksam wird
Frage Unter LINUX werden periodische Aufgaben nor...
Warum der Befehl „explain“ MySQL-Daten ändern kann
Wenn Sie jemand fragen würde, ob die Ausführung v...
So erstellen Sie einen Redis-Cluster mit Docker
Inhaltsverzeichnis 1. Erstellen Sie ein Redis-Doc...
Implementierung eines Puzzlespiels mit js
In diesem Artikel wird der spezifische Code von j...
Detaillierte Erläuterung der Nginx-Weiterleitungssocket-Portkonfiguration
Gängige Szenarien für die Weiterleitung von Socke...
Erweiterte MySQL-Datenbankabfrage und Mehrtabellenabfrage
MySQL-Abfrage für mehrere Tabellen Hinzufügen ein...
Grafisches Tutorial zur Installation von MySQL 5.5 unter Win7
Die MySQL-Installation ist relativ einfach. Norma...
Beispiel der MySQL-Group_Concat-Methode zum Schreiben von Gruppenfeldern in eine Zeile
Dieser Artikel beschreibt anhand eines Beispiels,...