css3 webkit-box-reflect falsch bei border-radius

[Yumyoko]

Hi,
ich kann mein Wissen über css ehrlich gesagt schlecht einschätzen, aber die Frage dürfte fortgeschritten sein.

Ich will ein png mit abgerundeten Ecken mit Schatten versehen und spiegeln. Nun stehe ich vor einem Problem. Ich kann dem png selbst mit css keinen Schatten verpassen - also habe ich das Icon in ein div gepackt, diesem mit border-radius abgerundete Ecken verpasst und dort den Schatten gemacht. Wenn ich jetzt allerdings spiegel, bekomme ich leider so bald ich webkit-gradient benutze die nicht vorhanden Ecken gezeichnet. Spiegel ich nur das png, habe ich keinen Schatten.

Ich weiß natürlich dass es workarounds gibt, aber gibt es eine Möglichkeit es mit diesen schicken neuen features zu machen? Ist da sonst schon wer drüber gestolpert?

LG,
Yumy

[Azra]

1. Warum legst du das Bild nicht direkt im Grafikprogramm so an wie es aussehen soll damit alle Browser damit klar kommen?
2. Vielleicht hilft dir das: http://jsfiddle.net/sl1dr/zr5a4/

[Yumyoko]

Zu 1. - weil das ja so laaaangweilig wär. Nein, im ernst: mich interessiert halt im Moment css3 - klar kann ich das als Bild speichern, aber mich würde so viel mehr interessieren, ob es mit css geht. Die Anwendungsmöglichkeiten wären großartig. Wie oft habe ich dutzende Bilder vorliegen und müsste sie alle per Hand ändern.

Zu 2. - der Schatten wird leider nach innen geworfen - wirft man ihn nach außen entsteht das gleiche Problem.

[Azra]

Vielleicht funktioniert es wenn du einen umschließenden Container erstellst und diesem position:relative; zuweist. Darin das <img> und ein weiterer Container den du mit position:absolute; vom Fluss heraus hebst und den Schatten werfen wird. ansonsten wüsste ich nun auch nicht weiter.