web-dev-qa-db-fra.com

CSS Box Shadow Bottom uniquement

Comment puis-je faire ceci? Je veux que mon élément ressemble à un soulignement ombré. Je ne veux pas de l'ombre pour les 3 autres côtés.

cssunderlinebox-shadow
344
WillingLearner

Faire ceci:

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

C'est en fait beaucoup plus simple, quelle que soit la définition du flou (3ème valeur), définissez le décalage (4ème valeur) sur le négatif.

749
Steve B

Vous pouvez utiliser deux éléments, l'un à l'intérieur de l'autre, et donner à l'élément externe overflow: hidden et une largeur égale à l'élément interne, ainsi qu'un rembourrage inférieur de sorte que l'ombre de tous les autres côtés soit "coupée"

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

Vous pouvez également faire flotter l'élément extérieur pour le ramener à la taille de l'élément intérieur. Voir: http://jsfiddle.net/QJPd5/1/

49
Yi Jiang

Essaye ça

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

Vous pouvez le voir dans http://jsfiddle.net/wJ7qp/

23
Nermien Barakat

essayez ceci pour obtenir la zone d'ombre sous votre contrôle total.

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

cela s'appliquerait également à l'ombre externe.

11
Saeed Tavoosi