Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Rahmen spielen

Rahmenstil

Die 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 border-width können Sie eine Breite für den Rahmen festlegen.

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;
    }

Rahmenfarbe

Mit der Eigenschaft „Border-Color“ wird die Farbe des Rahmens festgelegt. Die einstellbaren Farben sind:

Name - gibt den Namen der Farbe an, z. B. „rot“
RGB - gibt einen RGB-Wert an, beispielsweise „rgb(255,0,0)“
Hex - gibt einen hexadezimalen Wert an, beispielsweise "#ff0000"

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;

Der obere Rand ist gepunktet
Der rechte Rand ist durchgehend
Der untere Rand ist doppelt
Der linke Rand ist gestrichelt

Rahmenstil: gepunktet, durchgezogen, doppelt;

Der obere Rand ist gepunktet
Die linken und rechten Ränder sind durchgehend
Der untere Rand ist doppelt

Rahmenstil: gepunktet, durchgezogen;

Die oberen und unteren Ränder sind gepunktet
Die rechten und linken Ränder sind durchgehend

Rahmenstil: gepunktet;

Der Rand der vier Seiten ist 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:

Rahmenbreite
Rahmenstil (erforderlich)
Rahmenfarbe

    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

MySQL-Installationsinformationen unter Linux-Server anzeigen

Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Rahmen spielen

Rahmenstil

Rahmenbreite

Rahmenfarbe

MySQL-Installationsinformationen unter Linux-Server anzeigen

Centos7.5 Konfiguration Java-Umgebung Installation Tomcat Erklärung

Tipps zur Optimierung von MySQL SQL-Anweisungen

Beispielcode zur Implementierung eines Waben-/Sechseckatlas mit CSS

Erweiterte Verwendungsbeispiele für den Befehl mv in Linux

Detaillierte Erläuterung der Leistungsüberwachung des MySQL-Servers mit Prometheus und Grafana

Detailliertes Tutorial zur Installation von mysql8.0 mit dem Linux-Befehl yum

ReactHooks Batch-Update-Status und Abrufen von Routenparametern Beispielanalyse

So verwenden Sie localStorage in JavaScript

Einfaches Verständnis und Beispiele für MySQL Index Pushdown (ICP)

Artikel empfehlen

Detaillierte Erklärung des Prinzips und der Verwendung von MySQL-Ansichten

Wichtige Updates für MySQL 8.0.23 (neue Funktionen)

Einige Tipps zur umfassenden Optimierung, um die Zugriffsgeschwindigkeit von Websites zu verbessern

Detaillierter Prozess zum Upgrade von gcc (Version 10.2.0) in der CentOS7-Umgebung

Verwendung und Demonstration von ref in Vue

Konfigurieren von MySQL und Squel Pro auf dem Mac

Implementierung langer Textschatten in Less in CSS3

Beispiel für die Implementierung der Wertübertragung zwischen WeChat-Miniprogrammseiten

Lassen Sie uns ausführlich über den Symboldatentyp in ES6 sprechen

Detaillierte Erläuterung der MySQL-Indexprinzipien und -Optimierung

Konfiguration und Lizenzaktivierung der Remotedesktopdienste von Windows Server 2016 (2 Benutzer)

N Möglichkeiten, die letzte Listenzeile im CSS-Flex-Layout linksbündig auszurichten (Zusammenfassung)

Grafisches Tutorial zur Konfigurationsmethode für die kostenlose Installationsversion von MySQL 5.7.20

Ein Artikel bringt Ihnen bei, sauberen JavaScript-Code zu schreiben

CSS3-Textanimationseffekte