CSS Box Shadow Nur unten

Question

Wie kann ich das machen? Ich möchte, dass mein Element so aussieht, als hätte es eine schattierte Unterstreichung. Ich möchte den Schatten nicht für die anderen 3 Seiten.

Answer 1

Machen Sie das:

box-shadow: 0 4px 2px -2px grau;

Eigentlich ist es viel einfacher, wenn Sie den Blur-Wert (3. Wert) festlegen, setzen Sie den Spread (4. Wert) auf das negative davon.

Answer 2

Sie können zwei Elemente verwenden, eins innerhalb des anderen, und dem äußeren Element overflow: hidden und eine Breite geben, die der des inneren Elements entspricht, zusammen mit einem unteren Padding, so dass der Schatten an allen anderen Seiten "abgeschnitten" wird

#outer {
    width: 100px;
    overflow: hidden;
    padding-bottom: 10px;
}

#outer > div {
    width: 100px;
    height: 100px;
    background: orange;

    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

Alternativ können Sie das äußere Element floaten lassen, um es auf die Größe des inneren Elements zu reduzieren. Siehe: http://jsfiddle.net/QJPd5/1/

Answer 3

Versuchen Sie das

-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);

Sie können es unter http://jsfiddle.net/wJ7qp/ sehen

Answer 4

Probieren Sie das aus, um den box-shadow vollständig unter Kontrolle zu haben.

            div {
                width:300px;
                height:100px;
                background-color:yellow;
                box-shadow: 0 10px black inset,0 -10px red inset, -10px 0 blue inset, 10px 0 green inset;
           }

dies gilt auch für den äußeren box-shadow.