CSS Border Properties
Die CSS - border Eigenschaften ermöglichen es Ihnen , den Stil, die Breite zu geben, und die Farbe eines Grenze des Elements.
Dieses Element hat eine Nut, die Grenze 15px breit und grün ist.
Rahmenstil
Die border-style - Eigenschaft gibt an, welche Art von Grenze angezeigt werden soll .
Folgende Werte sind zulässig:
-
dotted- Definiert eine punktierte Grenze -
dashed- Definiert eine gestrichelte Umrandung -
solid- Legt eine feste Grenze -
double- Definiert eine doppelte Grenze -
groove- Definiert eine 3D - gerillten Rand. Die Wirkung hängt von der Grenzfarbwert -
ridge- Definiert einen geriffelten Rand 3D. Die Wirkung hängt von der Grenzfarbwert -
inset- Definiert eine 3D - Einsatz Grenze. Die Wirkung hängt von der Grenzfarbwert -
outset- Definiert eine 3D Anfang Grenze. Die Wirkung hängt von der Grenzfarbwert -
none- Definiert keine Grenze -
hidden- Legt eine versteckte Grenze
Die border-style - Eigenschaft kann von einem bis vier Werte (für den oberen Rand der rechten Grenze, untere Grenze, und die linke Grenze).
Beispiel
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}Ergebnis:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Versuch es selber "  | Hinweis: Keiner der anderen CSS - Grenze unten beschriebenen Eigenschaften wird keine Wirkung , wenn die border-style - Eigenschaft gesetzt ist! |
|---|
Rahmenbreite
Die border-width - Eigenschaft gibt die Breite der vier Grenzen.
Die Breite kann als eine bestimmte Größe (in eingestellt werden px, pt, cm, em dünn, mittel oder dick, etc.) oder durch die Verwendung einer der drei vordefinierten Werten.
Die border-width Eigenschaft kann von einem bis vier Werte (für den oberen Rand der rechten Grenze, untere Grenze, und die linke Grenze).
Beispiel
p.one
{
border-style: solid;
border-width: 5px;
}
p.two
{
border-style: solid;
border-width: medium;
}
p.three
{
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Versuch es selber " Randfarbe
Die border-color - Eigenschaft wird verwendet , um die Farbe der vier Grenzen zu setzen.
Die Farbe kann durch eingestellt werden:
- name - einen Farbnamen angeben, wie "red"
- Hex - geben Sie einen Hex - Wert, wie "#ff0000"
- RGB - geben Sie einen RGB - Wert, wie "rgb(255,0,0)"
- transparent
Die border-color - Eigenschaft kann von einem bis vier Werte (für den oberen Rand der rechten Grenze, untere Grenze, und die linke Grenze).
Wenn border-color nicht gesetzt ist, erbt es die Farbe des Elements.
Beispiel
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
} Versuch es selber " Border - Einzelseiten
Aus den obigen Beispielen haben wir gesehen, dass es möglich ist, eine andere Grenze für jede Seite zu spezifizieren.
In CSS gibt es auch Eigenschaften für jeden der Ränder angibt (oben, rechts, unten und links):
Beispiel
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
} Versuch es selber " Das obige Beispiel liefert das gleiche Ergebnis wie folgt aus:
So, hier ist, wie es funktioniert:
Wenn die border-style Eigenschaft hat vier Werte:
- border-style : punktiert massive Doppel gestrichelte;
- oberen Rand ist punktiert
- rechten Rand ist solide
- untere Grenze ist doppelt
- linken Rand ist gestrichelt
Wenn die border-style - Eigenschaft hat drei Werte:
- border-style : punktiert solide double;
- oberen Rand ist punktiert
- rechten und linken Ränder sind fest
- untere Grenze ist doppelt
Wenn die border-style Eigenschaft hat zwei Werte:
- border-style : punktiert solid;
- obere und untere Rand sind gespickt
- rechten und linken Ränder sind fest
Wenn die border-style - Eigenschaft hat einen Wert:
- border-style : punktiert;
- Alle vier Ränder sind gespickt
Die border-style - Eigenschaft wird im obigen Beispiel verwendet. Aber es funktioniert auch mit border-width und border-color .
Border - Stenografie Property
Wie Sie oben an den Beispielen sehen kann, gibt es viele Eigenschaften, die bei der mit Grenzen zu tun haben.
Um den Code zu verkürzen, ist es auch möglich, alle einzelnen Rahmeneigenschaften in einer Eigenschaft angeben.
Die border Eigenschaft ist eine zusammenfassende Eigenschaft für die folgenden einzelnen Rahmeneigenschaften:
-
border-width -
border-style(erforderlich) -
border-color
Mehr Beispiele
Alle Top - Rahmeneigenschaften in einer Erklärung
Dieses Beispiel zeigt eine zusammenfassende Eigenschaft für alle Eigenschaften für den oberen Rand in einer Erklärung zu setzen.
Stellen Sie den Stil der unteren Grenze
Dieses Beispiel zeigt, wie der Stil der unteren Grenze zu setzen.
Legen Sie die Breite des linken Rand
Dieses Beispiel zeigt, wie die Breite der linken Rand zu setzen.
Legen Sie die Farbe der vier Grenzen
Dieses Beispiel zeigt, wie die Farbe der vier Grenzen zu setzen. Es kann von einem bis vier Farben haben.
Legen Sie die Farbe des rechten Rand
Dieses Beispiel zeigt, wie die Farbe des rechten Rand zu setzen.
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4»
Alle CSS Border Properties
| Eigentum | Beschreibung |
|---|---|
| border | Setzt alle Rahmeneigenschaften in einer Erklärung |
| border-bottom | Setzt alle unteren Rand Eigenschaften in einer Erklärung |
| border-bottom-color | Legt die Farbe der unteren Grenze |
| border-bottom-style | Legt den Stil der unteren Grenze |
| border-bottom-width | Legt die Breite der unteren Grenze |
| border-color | Legt die Farbe der vier Grenzen |
| border-left | Setzt alle linken Rand Eigenschaften in einer Erklärung |
| border-left-color | Legt die Farbe für den linken Rand |
| border-left-style | Legt den Stil der linken Rand |
| border-left-width | Legt die Breite des linken Rand |
| border-right | Setzt alle rechten Rand Eigenschaften in einer Erklärung |
| border-right-color | Legt die Farbe des rechten Rand |
| border-right-style | Legt den Stil des rechten Rand |
| border-right-width | Legt die Breite des rechten Rand |
| border-style | Legt den Stil der vier Grenzen |
| border-top | Setzt alle oberen Rand Eigenschaften in einer Erklärung |
| border-top-color | Legt die Farbe der oberen Grenze |
| border-top-style | Legt den Stil der oberen Grenze |
| border-top-width | Legt die Breite der oberen Grenze |
| border-width | Legt die Breite der vier Grenzen |