CSS
Rand

Syntax

• Rand

• Rand: Randbreite Randart-Randfarbe | initial | erben;

• Rand oben: Randbreite Randart-Randfarbe | initial | erben;

• Rahmen unten: Rahmenbreite Rahmenfarbe | initial | erben;

• Rahmen links: Rahmenbreite Rahmenfarbe | initial | erben;

• Rahmen rechts: Rahmenbreite Rahmenfarbe | initial | erben;

• Grenzstil

• Bordürenstil: 1-4 keine | versteckt | gepunktet | gestrichelt | fest | doppelt | Nut | Grat | Einschub | Anfang | initial | erben;

• Grenzradius

• Grenzradius: 1-4 Länge | % / 1-4 Länge | % | initial | erben;

• Rand oben links Radius: Länge | % [Länge | %] | initial | erben;

• Rand oben rechts Radius: Länge | % [Länge | %] | initial | erben;

• Rand unten links Radius: Länge | % [Länge | %] | initial | erben;

• Rand unten rechts Radius: Länge | % [Länge | %] | initial | erben;

• Rahmenbild

• border-image: border-image-source border-image-slice [Rahmenbreite [Randbildausgang]]

• border-image-source: keine | Bild;

• Border-Image-Slice: 1-4 Anzahl | Prozentsatz [füllen]

• Randbildwiederholung: 1-2 Dehnung | wiederhole | rund | Platz

• Grenzzusammenbruch

• Grenzzusammenbruch: separate | zusammenbrechen | initial | erben

Bemerkungen

Grenzradius

Mit der Eigenschaft "border-radius" können Sie die Form des Basisrahmenmodells ändern.

Jede Ecke eines Elements kann bis zu zwei Werte für den vertikalen und den horizontalen Radius dieser Ecke haben (für maximal 8 Werte).

Der erste Wertesatz definiert den horizontalen Radius. Der optionale zweite Satz von Werten, dem ein "/" vorangestellt ist, definiert den vertikalen Radius. Wenn nur ein Wertesatz angegeben wird, wird er sowohl für den vertikalen als auch für den horizontalen Radius verwendet.

border-radius: 10px 5% / 20px 25em 30px 35em;

Der 10px ist der horizontale Radius von links oben und rechts unten. Und die 5% sind der horizontale Radius von oben rechts und unten links. Die anderen vier Werte nach '/' sind die vertikalen Radien für oben links, oben rechts, unten rechts und unten links.

Wie bei vielen CSS-Eigenschaften können Abkürzungen für einen oder alle möglichen Werte verwendet werden. Sie können also einen bis acht Werte angeben. Mit der folgenden Abkürzung können Sie den horizontalen und den vertikalen Radius jeder Ecke auf denselben Wert einstellen:

HTML:

<div class='box'></div>

CSS:

.box {
    width: 250px;
    height: 250px;
    background-color: black;
    border-radius: 10px;
}

Der Randradius wird am häufigsten zum Konvertieren von Rahmenelementen in Kreise verwendet. Durch Festlegen des Grenzradius auf die Hälfte der Länge eines quadratischen Elements wird ein kreisförmiges Element erstellt:

.circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

Da der Grenzradius Prozentsätze akzeptiert, werden üblicherweise 50% verwendet, um zu vermeiden, dass der Grenzradiuswert manuell berechnet wird:

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

Wenn die Eigenschaften width und height nicht gleich sind, ist die resultierende Form eher oval als kreisförmig.

Browserspezifisches Beispiel für den Grenzradius:

  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;

Grenzstil

Die border-style - Eigenschaft legt den Stil einer Grenze des Elements. Diese Eigenschaft kann einen bis vier Werte haben (für jede Seite des Elements einen Wert.)

Beispiele:

border-style: dotted;

border-style: dotted solid double dashed;

border-style können die Werte auch none und hidden . Sie haben den gleichen Effekt, mit Ausnahme der hidden Arbeiten für die Lösung von Grenzkonflikten für <table> -Elemente. In einer <table> mit mehreren Grenzen hat none die niedrigste Priorität (dh, in einem Konflikt würde die Grenze angezeigt), und hidden hat die höchste Priorität (dh in einem Konflikt würde die Grenze nicht angezeigt).

Grenze (Abkürzungen)

In den meisten Fällen möchten Sie mehrere Rahmeneigenschaften ( border-width , border-style und border-color ) für alle Seiten eines Elements definieren.

Anstatt zu schreiben:

border-width: 1px;
border-style: solid;
border-color: #000;

Sie können einfach schreiben:

border: 1px solid #000;

Diese Abkürzungen stehen auch für jede Seite eines Elements zur Verfügung: border-top , border-left , border-right und border-bottom . So können Sie tun:

border-top: 2px double #aaaaaa;

Rahmenbild

Mit der Eigenschaft border-image haben Sie die Möglichkeit, ein Bild anstelle von normalen Randstilen festzulegen.

Ein border-image Wesentlichen aus a

• border-image-source : Der Pfad zum zu verwendenden Bild
• border-image-slice : Bestimmt den Abstand, mit dem das Bild in neun Bereiche unterteilt wird (vier Ecken , vier Kanten und eine Mitte ).
• Rahmenbild border-image-repeat : Gibt an, wie die Bilder für die Seiten und die Mitte des Rahmenbilds skaliert werden

Betrachten Sie das folgende Beispiel, wobei border.png ein Bild mit 90x90 Pixeln ist:

border-image: url("border.png") 30 stretch;

Das Bild wird in neun Bereiche mit 30x30 Pixeln aufgeteilt. Die Kanten werden als Ecken der Umrandung verwendet, während die Seite dazwischen verwendet wird. Wenn das Element höher / breiter als 30 Pixel ist, wird dieser Teil des Bildes gestreckt . Der mittlere Teil des Bildes ist standardmäßig transparent.

Grenze- [links | rechts | oben | unten]

Mit der border-[left|right|top|bottom] einer bestimmten Seite eines Elements einen Rand hinzufügen.

Wenn Sie beispielsweise einen Rand an der linken Seite eines Elements hinzufügen möchten, können Sie Folgendes tun:

#element {
    border-left: 1px solid black;
}

Grenzzusammenbruch

Die border-collapse Eigenschaft gilt nur für table (und Elemente, die als display: table oder inline-table angezeigt werden) und legt fest, ob die Tabellenränder wie im Standard-HTML-Code zu einem einzigen Rand reduziert oder getrennt werden.

table {
  border-collapse: separate; /* default */
  border-spacing: 2px; /* Only works if border-collapse is separate */
}

Siehe auch Tabellen - Dokumentationseintrag für Border-Collapse

Mehrere Grenzen

Umriss verwenden:

.div1{
  border: 3px solid black; 
  outline: 6px solid blue;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Box-Schatten verwenden:

.div2{
  border: 5px solid green; 
  box-shadow: 0px 0px 0px 4px #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Verwenden eines Pseudoelements:

.div3 {
  position: relative;
  border: 5px solid #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}
.div3:before {
  content: " ";
  position: absolute;
  border: 5px solid blue;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

http://jsfiddle.net/MadalinaTn/bvqpcohm/2/

Erstellen eines mehrfarbigen Rahmens mit Rahmenbild

CSS

.bordered {
  border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /* gradient with required colors */
  border-image-slice: 1;
}

HTML

<div class='bordered'>Border on all sides</div>

Das obige Beispiel würde einen Rand ergeben, der aus 5 verschiedenen Farben besteht. Die Farben werden durch einen linear-gradient (weitere Informationen zu Farbverläufen finden Sie in den Dokumenten ). Weitere Informationen zur Eigenschaft border-image-slice im Beispiel für border-image auf derselben Seite.

( Hinweis: Dem Element wurden zu Darstellungszwecken zusätzliche Eigenschaften hinzugefügt. )

Sie hätten bemerkt, dass der linke Rand nur eine einzige Farbe hat (die Startfarbe des Farbverlaufs), während der rechte Rand nur eine einzige Farbe (die Endfarbe des Farbverlaufs) hat. Dies liegt an der Art und Weise, wie die Eigenschaften für die Rahmenabbildung funktionieren. Es ist, als würde der Farbverlauf auf das gesamte Feld angewendet, und dann werden die Farben in den Bereichen für das Auffüllen und den Inhalt maskiert, sodass der Eindruck entsteht, als habe nur der Rand den Farbverlauf.

Welche Umrandung (en) eine einzige Farbe haben, hängt von der Gradientendefinition ab. Wenn der Farbverlauf to right , ist der linke Rand die Startfarbe des Farbverlaufs und der rechte Rand die Endfarbe. Bei einem to bottom Farbverlauf wäre der obere Rand die Startfarbe des Farbverlaufs und der untere Rand die Endfarbe. Unten ist der Ausgang eines to bottom 5 farbigen Gradienten.

Wenn der Rand nur auf bestimmten Seiten des Elements erforderlich ist, kann die Eigenschaft border-width wie jeder andere normale Rand verwendet werden. Wenn Sie beispielsweise den folgenden Code hinzufügen, wird nur ein Rand oben auf dem Element angezeigt.

border-width: 5px 0px 0px 0px;

Beachten Sie, dass jedes Element mit border-image Eigenschaft border-image Randradius nicht border-radius (dh der Rand wird nicht gekrümmt). Dies basiert auf der folgenden Aussage in der Spezifikation:

Die Hintergründe einer Box, aber nicht ihr Rahmenbild, werden auf die entsprechende Kurve (durch den 'Hintergrundclip' festgelegt) beschnitten.