Grenzstil (CSS-Eigentum)

syntax

Grenzstil : {{🎜> Keine | versteckt | gepunktet | gestrichelt | solide | Double | Groove | Ridge | Einschub | Outset } 1 bis 4 Werte ^| erben } ; Beschreibung

Das Kurzform-Randstil stellt den Stil der Grenze auf allen vier Seiten eines Elements unter Verwendung der angegebenen Werte fest. Jede Grenze kann ihren eigenen Wert haben - in Kurzeigenschaften auf einfache Weise an die mnemonische (Ärger) in Kurzeigenschaften geleitet, um sich an die Kurzordnung zu erinnern. Die Grenzen befinden sich über den Hintergrund des Elements. oben ein gestürzter Rand nach unten und ein gepunkteter Rand an der links und rechte Seiten von Absätzen innerhalb des Elements mit ID "Beispiel":

Wert

#example p {
  border-style: solid dotted dashed;
}

Keine bedeutet, dass kein Rand angezeigt wird, und die berechnete Randbreite ist Null.

• versteckt hat die gleiche Bedeutung wie keine, außer wenn es sich auf Tabellenränder in Fällen bezieht, in denen zwei Zellen eine Grenze haben und die Tabellenzellen Grenzen kollabten (Grenzkollapse: Kollaps;). Der versteckte Wert stellt sicher, dass keine Grenze gezogen wird, da Hidden Vorrang vor allen anderen Grenzstilen hat. Wenn niemand für eine Grenze in der Zelle verwendet worden wäre, würde die Grenze immer noch gezogen, da die Grenze der angrenzenden Zelle Vorrang haben würde. Weitere Informationen finden Sie in der Tabellenformatierung.

• gepunktete implementiert die Grenze als eine Reihe von Punkten.

• gestrichelte implementiert den Rand als eine Reihe von Strichen.

• Solid implementiert den Rand als durchgezogene Linie.

• doppelt doppelt den Rand als zwei durchgezogene Linien implementiert. Die Summe der beiden Grenzbreiten und der Raum zwischen ihnen entsprechen dem Wert, der für die Grenzbreite festgelegt wurde.

• Rille ist ein dreidimensionaler Effekt, der den Eindruck erweckt, dass die Grenze in die Leinwand geschnitzt ist.

• Kamm ist ein 3D -Effekt, der den gegenteiligen Effekt der Rille hat, da der Rand aus der Leinwand herausragt.

• Einschub ist ein 3D -Effekt, der den Eindruck erweckt, dass das Box in die Leinwand eingebettet ist. Wenn es auf Tabellen verwendet wird, auf die das Modell der getrennten Grenzen angewendet wurde, scheint der Einschubwert das gesamte Box so aussehen zu lassen, als ob es in die Leinwand eingebettet wäre. Wenn es mit dem kollabenden Grenzmodell verwendet wird, wird es genauso wie der Wertkamm behandelt.

• Anfang ist ein 3D -Effekt, der den entgegengesetzten Einschub hat, indem der Grenze den Eindruck erweckt, dass die Box aus der Leinwand ragt. Wenn es auf Tischen verwendet wird, auf die das Modell der getrennten Grenzen angewendet wurde, lässt der Rand die gesamte Box so aussehen, als ob es aus der Leinwand kommt. Wenn es mit dem kollabierenden Grenzmodell verwendet wird, verhält es sich genauso wie eine Rille.

Zuvor durften in CSS1 Benutzeragenten alle gepunkteten, gestrichelten, doppelten, Rillen, Rücken, Einschüsse und Outs -Stile als solide interpretieren.

häufig gestellte Fragen (FAQs) zu CSS -Grenzstilen

Was sind die verschiedenen Arten von Grenzstilen in CSS? Dazu gehören "keine", "versteckt", "gepunktet", "gestrichelt", "fest", "doppelt", "Groove", "Ridge", "Inset" und "Outset". Jeder Stil hat einen einzigartigen visuellen Effekt. Zum Beispiel schafft 'gepunktet' einen Grenze zu einer Reihe von Punkten, während 'Double' einen Doppelzeilungsrand erstellt.

Wie kann ich die Breite und Farbe eines Randes in CSS? > In CSS können Sie die Breite und Farbe eines Randes mit den Eigenschaften "Grenzbreit" bzw. "Grenzfarben" einstellen. Um beispielsweise eine Randbreite von 5 Pixel und eine rot-Farbe festzulegen, verwenden Sie den folgenden Code:

Grenzbreite: 5px;

Grenzfarbe: rot;

Was ist der Unterschied zwischen 'None' und 'versteckten' Grenzstilen in CSS? subtiler Unterschied. "Keine" bedeutet, dass keine Grenze gezogen wird, während "versteckt" bedeutet, dass die Grenze gezogen, aber nicht sichtbar ist. Dieser Unterschied ist in Tabellenelementen am auffälligsten CSS können Sie unterschiedliche Grenzstile für verschiedene Seiten eines Elements angeben, indem Sie "Border-Top-Stil", "Border-Right-Stil", "Border-Bottom-Stil" und "Border-Right-Stil" und "Border-Top" und angeben Eigenschaften im Rand-Links-Stil. Um beispielsweise einen soliden Rand oben und einen gepunkteten Rand auf der Unterseite festzulegen, verwenden Sie den folgenden Code:

Border-Top-Stil: Solid; . einer Grenze in einer Codezeile. Die Syntax ist "Border: Breitenstilfarbe". Um beispielsweise einen 5 Pixel festen roten Rand festzulegen, würden Sie den folgenden Code verwenden:

Rand: 5px solidrot;

Was ist der Standard -Grenzstil in CSS? Wenn Sie einem Element einen Rand hinzufügen möchten, müssen Sie einen anderen Randstil als 'keine' angeben. Sie können Hexadezimal -Farbcodes verwenden, um Grenzfarben in CSS anzugeben. Um beispielsweise eine Randfarbe auf hellblau einzustellen, würden Sie den folgenden Code verwenden:

Grenzfarbe: #add8e6;

Wie kann ich einen abgerundeten Rand in CSS erstellen?

Sie können einen abgerundeten Rand in CSS unter Verwendung des Grundstücks "Border-Radius" erstellen. Mit dieser Eigenschaft können Sie den Radius der Grenzschlungen einstellen und einen abgerundeten Effekt erzeugen. Um beispielsweise einen Grenzradius von 10 Pixel festzulegen, würden Sie den folgenden Code verwenden:

Border-Radius: 10px;

Kann ich die Eigenschaft "Rand" in CSS mit Bildern verwenden?

Ja, Sie können die Eigenschaft "Rand" in CSS verwenden, um Bildern Grenzen hinzuzufügen. Dies kann nützlich sein, um Bilder hervorzuheben oder sie von anderen Elementen auf der Seite zu trennen.

Wie kann ich einen Rand mit einer Gradientenfarbe in CSS erstellen? CSS ist etwas komplexer und erfordert die Verwendung eines Hintergrundbildes mit einem linearen Gradienten und der Anpassung der Polster- und Hintergrund-Clip-Eigenschaften. Hier ist ein Beispiel dafür, wie Sie es tun können:

.box {

Hintergrund: linear Gradient (bis unten, rot, blau); -Style: fest;

Grenzbild: linear Gradient (bis unten, rot, blau) 1;

Das obige ist der detaillierte Inhalt vonGrenzstil (CSS-Eigentum). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!