Benutzerdefinierter grafischer Rahmen für DIV mit CSS

Ok, das ist ein Problem, das mich schon seit einiger Zeit quält und ich habe ein paar gute und schlechte Lösungen gesehen. Aber was ist die beste Lösung, und was sind die Fallstricke, Nachteile und großen "Nein, nein" .

Ich möchte dynamische, flexible DIV-Blöcke mit einem benutzerdefinierten grafischen Rahmen erstellen. Für Beispiel eine DIV-Box mit Schatten, aber nicht unbedingt Schatten .

AKTUALISIERT: Wie @ Jeroen in einem Kommentar sagte, ich frage nicht nur nach "der beste Weg, um Schatten zu machen". Jeder verrückte benutzerdefinierte grafische Rahmen .

Ich weiß, dass es einige Lösungen mit CSS3 gibt ( box-shadow , border-image und border-radius ), aber es ist nicht 100% browserübergreifend , besonders nicht, wenn Sie arbeiten müssen ein oder zwei Versionen alter Browser.

Beispielbild von dem, was ich erreichen möchte:

oder

Das obige Beispiel ist tatsächlich mit einer Methode gemacht, die ich häufig benutze. Es erfüllt seine Aufgabe und erfüllt alle Anforderungen.

• Es passt sich an unterschiedlich große DIV-Blöcke an.
• Es verwendet benutzerdefinierte Grafiken.
• Es funktioniert browserübergreifend und Versionen.
• Es ist ziemlich einfach und schnell anzuwenden.
• Es ist JavaScript kostenlos, 100% CSS / HTML.

... aber natürlich gibt es ein paar Nachteile:

• Es erfordert 8 Bilder.
• Es benötigt 8 zusätzliche DIV-Blöcke ohne echten Inhalt .
• Nicht sehr hübsch in der Quelle.

HTML-DIV-Block Beispiel:

CSS-Beispiel:

Wie Sie sehen können, ist es vielleicht keine optimale Lösung. Aber gibt es einen besseren Weg?

AKTUALISIERT: In den meisten Browsern und Versionen wird Schatten unterstützt, auch wenn es sich nicht um einen Standard handelt. Quelle mit CSS-Schatten: Ссылка Aber meine Frage bezieht sich nicht nur auf Schatten.

Vollständiger Quellcode: Ссылка