CSS Problem

[Gunnar Bittersmann]

@@Lux

border-top: 8px solid #FFF;
border-right: 8px solid #FFF;
border-bottom: 40px solid #FFF;
border-left: 8px solid #FFF;

Die viermalige Wiederholung von border-style und border-color ist nicht das, was man tun sollte, sondern jede Angabe genau einmal tätigen.

Besser:

border: 8px solid #FFF;
border-bottom-width: 40px;

oder

border-style: solid;
border-color: #FFF;
border-width: 8px 8px 40px 8px;

(Reihenfolge: oben–rechts–unten–links)

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Die Präfixe sind Unsinn. Sämtliche relevanten Browser haben border-radius präfixfrei.

box-shadow: 1px 2px 4px rgba(0,0,0,.4);

Schatten erfordern einigen Rechenaufwand. Wenn da noch Transparenz hinzukommt …

Transparenz sollte bei gut gewählten Werten für blur radius und spread distance (3. und 4. Längenangabe) aber nicht erforderlich sein.

margin-top:10px; 
margin-left:0px; 
margin-bottom:10px; 
margin-right:10px;

Kurz:

margin: 10px 0 10px 10px;

(Reihenfolge: oben–rechts–unten–links)

LLAP 🖖