box-Schatten über floating divs

Hab ich ein problem-rendering-box-Schatten über floating divs!
Ive getestet in chrome und firefox, mit dem gleichen Ergebnis.

    <html>
        <head>
        </head>
        <body>
            <div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
            </div>
            <div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;">
            </div>
        </body>
    </html>

Edit: Das div-Element auf der Oberseite nicht wiedergegeben wird seinen Schatten auf das div unten, gibt es eine Lösung für dieses problem oder muss ich versuchen eine andere Lösung?

Grüße
/Joel

InformationsquelleAutor Yo-L | 2011-05-13
  1. 16

    Funktioniert bei mir in Firefox 4, aber dieser code wird nie funktionieren, in chrome oder safari, die -moz ist ein Hersteller Schild mozilla.

    Müssen Sie fügen Sie alle der folgenden

    -moz-box-shadow: 0px 8px 8px #000; width: 200px;
-webkit-box-shadow: 0px 8px 8px #000; width: 200px;
box-shadow: 0px 8px 8px #000; width: 200px;

    -webkit ist die vendor-Tags für Chrome/Safari, wird Folgendes hinzufügen in der drop-shadows für die Anbieter, die unterstützen, und dann, wenn es universell unterstützt wird die Letzte Regel wird für alle Browser.

    Edit: Für die top-div ' s Schlagschatten über das andere element müssen Sie position:relative und dann geben wir es ein z-index höher als die unteren.

    • Sie wirklich se 2 divs mit Schatten? Das div-Element auf der Oberseite sollte schattenwurf auf das div unten. Alles, was ich sehe ist eine große box mit Schatten.
    • Sorry, deine Frage ist ein wenig unklar. Sie müssen relativ positionieren Sie Ihr element und dann auf der z-index, um die top eine über der anderen. Siehe: jsfiddle.net/YjPRN
    • Awsome 😀 Krank beheben, ist die Frage.
    • +1 für die z-index-Zeug
    • position: relative ist wichtig und behoben mein problem!
    InformationsquelleAutor JaredMcAteer
  2. 3

    Was ist falsch mit Ihnen? Wenn Sie besorgt über das nicht-sehen der unteren Schatten der top - div es ist, weil Sie ein wenig Trennung. Wenn Sie Probleme haben, sehen die box-shadow-es ist, da müssen Sie die Verwendung von herstellerspezifischen Präfixe in dieser Phase, wie so.

    Demo: jsfiddle.net/q5yf3

    Wenn Sie wollen, dass Sie zusammen geklebt werden, geben die ersten div eine z-index mit position:relative und es wird Aussehen, wie Sie es wollen.

    HTML:

    <div class="bs up"></div>
<div class="bs"></div>

    CSS:

    div.bs {
    float:left;
    clear:left;
    margin:1em;
    width:200px;
    height:200px;
    background:#aaa;
    box-shadow:0 8px 8px #000;
    -moz-box-shadow:0 8px 8px #000;
    -webkit-box-shadow:0 8px 8px #000;
}
div.up { z-index:10; position:relative; }

    Demo: jsfiddle.net/VaVhy

    Sagte, ich würde auch empfehlen, sich in rgba() statt hex-Werte für box-shadow Farbe, da es rendert den Schatten viel mehr natürlich auf nicht flachen Hintergründen.

    • Ja, ich habe keine Marge zwischen meinen divs, und ich brauche, um Sie fest zusammen, oder zumindest machen Sie so erscheinen. Sobald ich die hintergrund-Farbe der Schatten verschwindet.
    • Ah stimmt, ich habe ein zweiten Teil meiner Antwort bezieht sich auf dein problem, nach den ersten link zu einer demo.
    • Ill halten Sie die rgba () - Tipp in den Sinn, wenn ich das ausprobieren. Danken Sie u sehr viel.
    InformationsquelleAutor Marcel
  3. 1

    sieht gut aus in firefox, weil Sie mit -moz-box-shadow für webkit-Browser Sie verwenden -webkit-box-shadow

    • Ja, ich weiß, ich habe einfach den code klein. ich nicht für mich in 3.6. siehst du 2 Boxen mit Schatten oder einen?
    • beide haben den Schatten auf der rechten Seite, die untere hat einen Schatten am Boden, wenn Sie wollen, dass beide zu Boden shadown dann nur trennen die div ' s etwas mit einem '<br />' für die Schnelligkeit, oder ändern Sie die Ränder des divs
    • Sorry! wie gesagt, meine Frage war etwas falsch gestellt.
    InformationsquelleAutor tcnarss
Schreibe einen Kommentar