Alleen CSS Box Shadow Bottom

Hoe kan ik dit doen? Ik wil dat mijn element eruitziet alsof het een schaduwonderstreping heeft. Ik wil geen schaduw voor de andere 3 zijden.


Antwoord 1, autoriteit 100%

Doe dit:

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

Het is eigenlijk veel eenvoudiger: waar je de vervaging ook op zet (3e waarde), stel de spread (4e waarde) in op het negatieve ervan.


Antwoord 2, autoriteit 6%

Je kunt twee elementen gebruiken, de ene in de andere, en de buitenste overflow: hiddenen een breedte gelijk aan het binnenste element geven, samen met een onderste opvulling zodat de schaduw op alle andere zijkanten zijn “afgesneden”

#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);
}

U kunt ook het buitenste element laten zweven om het te laten krimpen tot het formaat van het binnenste element. Zie: http://jsfiddle.net/QJPd5/1/


Antwoord 3, autoriteit 3%

Probeer dit

-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);

Je kunt het zien in http://jsfiddle.net/wJ7qp/


Antwoord 4

probeer dit om de box-schaduw onder je volledige controle te krijgen.

   <html>
    <head>
        <style> 
            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;
           }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>
    </html>

dit zou ook van toepassing zijn op de buitenste doosschaduw.

Other episodes