Rahmen

Standardmäßig haben die meisten HTML-Elemente keinen Rahmen, aber CSS bietet zahlreiche Optionen zum Definieren eines Rahmens mit einer Reihe von rahmenbezogenen Eigenschaften. Tatsächlich kann der Rahmen mit so vielen Eigenschaften angepasst werden, dass er manchmal etwas verwirrend wird. Auf der einfachsten Ebene möchten Sie jedoch normalerweise die Farbe, Breite und den Stil des Rahmens steuern. Schauen wir uns ein Beispiel dafür an:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border-color: CornflowerBlue;
	border-width: 2px;
	border-style: solid;
}
</style>

<div class="box">
	Hello, world!
</div>

Das ist so ziemlich so einfach gehalten wie es nur geht - mit den Eigenschaften Rahmenstil, Rahmenfarbe und Rahmenbreite können wir das ganz einfach tun Geben Sie einem Element die gewünschte Grenze. Lassen Sie uns nun über diese drei Eigenschaften sprechen.

Rahmen Farbe

Nur eine einfache alte Farbeigenschaft, bei der Sie die Farbe für den Rand auf verschiedene Arten definieren können, wie es bei allen farbbezogenen Eigenschaften in CSS der Fall ist. In diesem Tutorial finden Sie an anderer Stelle eine vollständige exemplarische Vorgehensweise für alle Optionen, die Sie beim Definieren einer Farbe in CSS haben.

Rahmen breite

Funktioniert ähnlich wie Ränder und Abstände - kann entweder ein absoluter Wert sein, wie in diesem Beispiel ein relativer Wert, oder einer der vordefinierten Werte für die Randbreite: Dünn, Mittel oder Dick. Wenn Sie die vordefinierten Werte verwenden, liegt es am Browser, diese zu interpretieren, wodurch Sie im Grunde weniger Kontrolle darüber haben, wie Ihre Arbeit auf allen verschiedenen Geräten und Browsern aussieht.

Rahmen Stil

Für den Stil des Rahmens haben Sie eine Reihe von Optionen. Am häufigsten wird wahrscheinlich der durchgezogene Rand verwendet, es stehen jedoch noch viele weitere zur Auswahl: hidden, dotted, dashed, solid, double, groove, ridge, inset und outset. Wollen Sie wissen, wie sie alle aussehen? Probieren Sie dieses Beispiel aus:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border-color: CornflowerBlue;
	border-width: 4px;
	margin: 10px;
	float: left;
}
</style>

<div class="box" style="border-style: dashed;">Dashed</div>
<div class="box" style="border-style: dotted;">Dotted</div>
<div class="box" style="border-style: double;">Double</div>
<div class="box" style="border-style: groove;">Groove</div>
<div class="box" style="border-style: inset;">Inset</div>
<div class="box" style="border-style: outset;">Outset</div>
<div class="box" style="border-style: ridge;">Ridge</div>
<div class="box" style="border-style: solid;">Solid</div>

Shorthands

Wir haben bereits früher über Kurzform-Eigenschaften gesprochen-Eigenschaften, mit denen Sie Werte für mehrere Eigenschaften gleichzeitig definieren können. Im ersten Beispiel haben wir die Eigenschaften der Kurzschrift verwendet, um für die Ränder aller vier Seiten eines Elements dieselbe Farbe, Breite und denselben Stil zu definieren. Beispielsweise wird der Rahmenstil tatsächlich Rahmenstil oben, Rahmenstil rechts, Rahmenstil unten und Rahmenstil links zugeordnet und das Gleiche gilt für Rahmenbreite und Rahmenfarbe.

Dies bedeutet auch, dass Rahmenstil, Rahmenfarbe und Rahmenbreite jeweils einen bis vier Werte annehmen können, sodass Sie für alle vier Seiten des Elements unterschiedliche Stile, Farben und Breiten verwenden können. Hier ist ein Beispiel:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border-style: solid dashed ridge dotted;
	border-color: CornflowerBlue Chartreuse CadetBlue Chocolate;
	border-width: 1px 2px 3px 4px;
}
</style>

<div class="box">
	Hello, world!
</div>

Jetzt ist das Endergebnis eine ziemlich seltsam aussehende Schachtel, aber hoffentlich können Sie sehen, wie es funktioniert. Genau wie bei Rändern können Sie einen oder mehrere Werte angeben, die von oben und im Uhrzeigersinn um das Element (oben, rechts, unten, links) angewendet werden.

Ohne diese Abkürzungen müssten Sie 12 Eigenschaften verwenden, um das gleiche Ergebnis zu erzielen, aber es kann noch kürzer werden: Mit der border-Eigenschaft können Sie sie noch weiter verkürzen. Hier ist unser erstes Beispiel, das neu geschrieben wurde, um die border-Eigenschaft zu verwenden:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border: 2px solid CornflowerBlue;
}
</style>

<div class="box">
	Hello, world!
</div>

Wir haben nur ein paar Eigenschaften mehr gespeichert! Wenn Sie die border -Eigenschaft verwenden, ist die richtige Reihenfolge Breite, Stil und Farbe. Auch wenn der Browser dies möglicherweise versteht, wird empfohlen, bei Verwendung der border -Eigenschaft immer diese bestimmte Reihenfolge zu verwenden. Beachten Sie, dass Sie einen oder zwei Werte überspringen dürfen. In diesem Fall versucht der Browser zu verstehen, welche Werte Sie übersprungen haben, und weist die Standardwerte für die fehlenden Werte zu.

Rahmenradius

Als Ergänzung zu CSS 3 wurde die Möglichkeit hinzugefügt, den Rahmenradius zu definieren, wodurch Entwickler effektiv die Möglichkeit haben, abgerundete Ecken an ihren Elementen zu erstellen. Für neue Entwickler mag dies trivial erscheinen, aber bevor dies hinzugefügt wurde, erzeugte der Wunsch nach abgerundeten Ecken Hunderte von Artikeln mit Anleitungen!

Glücklicherweise war das in der Vergangenheit und dank der Eigenschaft border-radius ist es jetzt kinderleicht, abgerundete Ecken zu erhalten:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border: 3px solid CornflowerBlue;
	border-radius: 5px;
}
</style>

<div class="box">
	Hello, world!
</div>

Der einzige Nachteil ist die mangelnde Unterstützung in Internet Explorer 8 und Versionen darunter, aber sie werden einfach auf normale Ecken zurückgreifen. Wie Sie vielleicht schon vermutet haben, ist border-radius eine Kurzform für border-top-left-radius, border-top-right-radius und border-bottom-right-radius und border-bottom-left-radius. Sie können diese einzeln festlegen oder einen oder mehrere Werte für die Eigenschaft border-radius verwenden, um unterschiedliche Werte für die vier Ecken eines Elements zu erhalten.

Die Eigenschaft border-radius nimmt wie die meisten anderen CSS-Längeneinheiten absolute und relative Werte an. Im nächsten Beispiel werden damit Ecken erstellt, die so abgerundet sind, dass das übliche quadratische Feld tatsächlich zu einem Kreis wird:

<style type="text/css">
.circle {
	width: 100px;
	height: 100px;
	background-color: CornflowerBlue;
	border-radius: 50%;
}
</style>

<div class="circle"></div>

Ziemlich cool, oder?

Zusammenfassung

Rahmen sind ein großartiges Werkzeug beim Entwerfen Ihrer Webseiten. Wie Sie aus den obigen Beispielen ersehen können, sind sie sowohl flexibel als auch benutzerfreundlich. Die Menge der "Shorthand"-Eigenschaften kann die Dinge etwas verwirrend machen, aber nach einer Weile werden Sie den Dreh raus haben.