CSS: Rahmen

Dieser Artikel wurde von Do, Hoang Viet am Mittwoch, 3. April 2013 verfasst. Aktualisiert: 28.01.2014 18:44:26

Gerade für bei Box-basierten Layouts, verhilft der Rahmen den nötigen Feinschliff zum perfekten Design.

Für die Definition eines Rahmens, wird die Property border verwendet. Die nachfolgende Definition würde den einen grünen 1px breiten durchgezogenen Rahmen für alle Absätze definieren

p {
  border: 1px solid #00ff00;
}

"1px" gibt die Breite des Rahmens an. Mit solid wird eine durchgezogene Linie gezeichnet. Weitere Alternativen wären:

none Keinen Rahmen
dashed Rand mit gestrichelte Line
dotted Rand mit gepünktete Linie
solid Rand mit durchgezogene Linie
double Rand mit doppelt durchgezogene Linie
groove 3D-Effekt
ridge 3D-Effekt
inset 3D-Effekt
outset 3D-Effekt
inherit Übernimmt die Eigentschaft von Eltern

Es ist auch möglich nur einzelne Seiten des Rahmens zu definieren. Die Definitionen sind unabhängig von einander:

p {
  border-left: 1px solid #00ff00;
  border-top: 10px dotted #00ffff;
}
 
blog comments powered by Disqus

Google Anzeigen

Neusten Blogeinträgen

  • CSS: Animationen

    CSS3 bietet von Haus aus Möglichkeiten zur Definition von Animationen über die Property animation. Wie es funktioniert zeigen wir in diesem Artikel.

  • CSS: Alternierende Tabellenzeilen

    Um die Lesbarkeit von Tabellen zu steigern, bietet die CSS die Möglichkeit Tabellenzeilen alternierend zu färben. Wie das funktioniert zeigen, wir ...

  • Unity3D: Konsolenausgabe formatieren

    Die Unitykonsole ist einer der meistgenutzten Feature wenn es bei Unity um Fehlersuche und -behandlung geht. Sie wird dabei schnell voll und verli ...

  • Unity3D: Singleton für langsame Operationen

    Operationen wie Object.FindObjectOfType werden in der Dokumentation von Unity3D Entwickler selbst als sehr langsam beschrieben. Aus dem Grund wird ...

  • Unity3D: Optionale Parameter

    Unity3D (4.3.1) unterstützt keine optionale Parameter, wenn die betroffene Skriptdatei in einem Namespace definiert wird.

Popular Threads

Share it on your network