CSS Backgrounds and Borders Level 3 @ Ein kleines! Lexikon des Internet

ist eine vom W3C vorgestellte Empfehlung über die Gestaltung von Hintergründen und Rahmen.
CSS Level 3 (CSS3) wird von der CSS Wor­king Group in eigen­ständigen Modulen entwickelt, um zukünf­tige An­for­de­rungen schneller ein­arbeiten zu können. Dieses Modul wird durch das mit CSS2 ein­ge­führte Box-Modell unter­stützt, in dem der Inhalt von den Bereichen padding (Füll­be­reich), border (Ein­rah­mung) und margin (Be­gren­zung) umgeben wird.

CSS Box-Modell

Für den Hintergrund ist als Neuerung die Möglichkeit dazu­ge­kommen, meh­rere Hinter­grund­bilder zu defi­nieren und ihnen unter­schied­liche Eigen­schaften, wie Posi­tion, Wie­der­holung usw., zuzuordnen.

Bei Rahmen (border) werden nun gerun­dete Ecken unterstützt. Dabei werden mit border-radius alle vier Ecken gerundet, mit border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius und border-top-left-radius die einzelnen Ecken. Ange­geben wird ein Pixel- oder ein pro­zen­tualer Wert, werden zwei Werte ange­geben gilt der erste für den hori­zon­talen, der zweite für den ver­ti­kalen Radius. Die prozentualen Werte beziehen sich auf die Breite bzw. Höhe der Box. Mit box-shadow ist nun auch ein Schatten der jeweiligen Box erlaubt. Die Parameter lauten horizontaler und vertikaler Versatz, Breite und Farbe.

Die Unterstützung für CSS durch die mo­der­nen Browser ist sehr un­ter­schied­lich (ᵅ). Teil­weise wer­den Ele­men­te aus CSS3 be­reits unter­stützt, während Ele­mente aus CSS2 noch fehlen.

Beispiel

 color: #FFF;
 /* Hintergrund bei Fehlinterpretation */
 background-color: darkgrey;
 border: 4px solid yellow;
 /* Präfixe -moz- -webkit- -o- -ms- im Quelltext */
 border-radius: 12px;
 box-shadow: 4px 4px 4px gray;
 /* CSS Color Level 3 */
 background: linear-gradient(left, red, green, blue);

W3C - Technical Reports

{CSS Backgrounds and Borders Module Level 3
 - http://www.w3.org/TR/css3-background/} (CR)
{CSS 2.1 Box model
- http://www.w3.org/TR/CSS2/box.html} (Rec)

Weiterführende Links

{Web Style Sheets home page
 - http://www.w3.org/Style/}
@ W3C
 (ᵅ) {Comparison of layout engines (Cascading Style Sheets)
 - http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29}
@ en.Wikipedia.org