CSS-Rahmen
CSS-Rahmen
In diesem Kapitel sprechen wir über Rahmen und darüber, wie wir sie gestalten können. Wir können dem Rahmen Breite, Stil und Farbe geben.
Beispiel für die border-Eigenschaft:
Beispiel für die border-Eigenschaft:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="border:3px dotted #1c87c9"> Example with a blue dotted border.</p>
<p style="border:3px dashed #ffff00"> Exaxmple with a yellow dashed border.</p>
<p style="border:3px solid #8ebf42"> Example with a green solid border.</p>
</body>
</html>Ergebnis
Rahmenbreite
Die Eigenschaft border-width legt die Breite eines Rahmens fest.
Die Breite kann in Pixeln angegeben werden. Sie kann auch mit einem der drei vordefinierten Werte angegeben werden: medium, thin oder thick.
Sie können die Eigenschaft "border-width" nicht allein verwenden. Sie funktioniert dann nicht. Verwenden Sie zuerst "border-style", um die Rahmen festzulegen.
Beispiel für die border-width-Eigenschaft:
Beispiel für die border-width-Eigenschaft:
<!DOCTYPE html>
<html>
<head>
<style>
p.border-width-1 {
border-style: solid;
border-width: 6px;
}
p.border-width-2 {
border-style: dotted;
border-width: 1px;
}
p.border-width-3 {
border-style: dotted;
border-width: medium;
}
p.border-width-4 {
border-style: double;
border-width: 8px;
}
p.border-width-5 {
border-style: double;
border-width: thick;
}
p.border-width-6 {
border-style: solid;
border-width: 3px 12px 6px 18px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p class="border-width-1">Example with border-width.</p>
<p class="border-width-2">Example with border-width.</p>
<p class="border-width-3">Example with border-width.</p>
<p class="border-width-4">Example with border-width.</p>
<p class="border-width-5">Example with border-width.</p>
<p class="border-width-6">Example with border-width.</p>
</body>
</html>Rahmenfarbe
Die Eigenschaft border-color wird verwendet, um die Farbe eines Rahmens festzulegen. Die Farbe kann folgendermaßen angegeben werden:
- name - gibt einen Farbnamen an, wie "red"
- RGB - gibt einen RGB-Wert an, wie "rgb(255,0,0)"
- Hex - gibt einen Hex-Wert an, wie "#ff0000"
Sie können die Eigenschaft "border-color" nicht allein verwenden. Sie funktioniert dann nicht. Verwenden Sie zuerst "border-style", um die Rahmen festzulegen.
Normalerweise schreiben wir diese drei Eigenschaften zusammen in einer Zeile.
Beispiel für die border-color-Eigenschaft:
Beispiel für die border-color-Eigenschaft:
<!DOCTYPE html>
<html>
<head>
<style>
p.color-one {
border-style: solid;
border-color: blue;
}
p.color-two {
border-style: dotted;
border-color: yellow;
}
p.color-three {
border-style: solid;
border-color: DarkBlue orange green red;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p class="color-one">Example with blue solid border-color.</p>
<p class="color-two">Example with yellow dotted border-color.</p>
<p class="color-three">Example with multicolor border-color.</p>
</body>
</html>Sie können andere Beispiele mit unserem Tool CSS Maker ausprobieren.
Rahmenstil
Die CSS-Eigenschaft border-style legt den Stil aller vier Seiten der Rahmen eines Elements fest. Rahmen werden über dem Hintergrund eines Elements platziert. Sie kann von einem bis vier Werte haben. Jede Seite kann also ihren eigenen Wert haben. Der Standardwert von border-style ist none.
Border-style hat die folgenden Werte:
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Einige Browser unterstützen manche Stile nicht. Wenn ein Stil normalerweise nicht unterstützt wird, zeichnet der Browser den Rahmen als durchgezogenen Rahmen.
CSS-Rahmen für einzelne Seiten
CSS bietet Eigenschaften, die jeden Rahmen festlegen (rechts, links, unten und oben).
Die Eigenschaft border-style kann 4 Werte haben, zum Beispiel border-style: dotted solid double dashed; wobei der obere Rahmen gepunktet ist, der untere Rahmen doppelt, der rechte Rahmen durchgezogen und der linke Rahmen gestrichelt ist.
Die Eigenschaft border-style kann 3 Werte haben, zum Beispiel border-style: dotted solid double; wobei der obere Rahmen gepunktet ist, der untere Rahmen doppelt und der rechte und linke Rahmen durchgezogen sind.
Die Eigenschaft border-style kann 2 Werte haben, zum Beispiel border-style: dotted solid; wobei der rechte und linke Rahmen durchgezogen sind und der obere und untere Rahmen gepunktet sind. Und natürlich kann diese Eigenschaft auch nur 1 Wert haben, zum Beispiel border-style: solid; wobei alle Seiten durchgezogen sind.
Beispiel für die Rahmeneigenschaften für einzelne Seiten:
Beispiel für den Rahmen für einzelne Seiten:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: double;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: groove;
}
</style>
</head>
<body>
<p>Example with border individual sides.</p>
</body>
</html>CSS-Rahmen als Kurzschreibweise
Die CSS-Eigenschaft border ist eine Kurzschreibweise für die folgenden einzelnen Rahmeneigenschaften:
- Die CSS-Eigenschaft border-width, die die Breite aller vier Seiten des Rahmens eines Elements festlegt.
- Die CSS-Eigenschaft border-style, die den Stil aller vier Seiten der Rahmen eines Elements festlegt.
- Die CSS-Eigenschaft border-color, die die Farbe aller vier Seiten des Rahmens eines Elements festlegt.
Beispiel für die border-Kurzschreibweise:
Beispiel für die border-Kurzschreibweise:
<!DOCTYPE html>
<html>
<head>
<style>
p.border-all {
border: 3px solid red;
}
p.border-left {
border-left: 4px solid blue;
background-color: #dcdcdc;
}
p.border-top {
border-top: 6px solid green;
background-color: #dcdcdc;
}
</style>
</head>
<body>
<h2>The border Shorthand Property</h2>
<p class="border-all">Example with a shorthand property for border-width, border-style, and border-color.</p>
<p class="border-left">Example with a shorthand property for border-left-width, border-left-style, and border-left-color.</p>
<p class="border-top">Example with a shorthand property for border-top-width, border-top-style, and border-top-color.</p>
</body>
</html>Abgerundete Rahmen
Mit der CSS-Eigenschaft border-radius können Sie einem Element abgerundete Rahmen hinzufügen.
Beispiel für die border-radius-Eigenschaft:
Beispiel für die border-radius-Eigenschaft:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 3px solid blue;
}
p.round-one {
border: 3px solid blue;
border-radius: 6px;
}
p.round-two {
border: 3px solid blue;
border-radius: 9px;
}
p.round-three {
border: 3px solid blue;
border-radius: 15px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p class="normal">Example with normal border</p>
<p class="round-one">Example with round border</p>
<p class="round-two">Example with rounder border</p>
<p class="round-three">Example with roundest border</p>
</body>
</html>Der Unterschied zwischen Rahmen und Umrissen
Umrisse und Rahmen werden oft verwechselt, weil sie sich sehr ähnlich sind. Es gibt jedoch Unterschiede zwischen diesen beiden:
- Umrisse werden außerhalb des Inhalts eines Elements gezeichnet, nehmen also keinen Platz ein.
- Umrisse sind normalerweise rechteckig, obwohl sie es nicht sein müssen.
Practice
Which of the following are properties that can be used to style borders in CSS?