Solo CSS scatola di ombra inferiore [duplicato]

StackOverflow https://stackoverflow.com/questions/4561097

  •  14-10-2019
  •  | 
  •  

Domanda

Questa domanda ha già una risposta qui:

Come posso fare questo? Voglio che il mio elemento a guardare come se ha una sottolineatura ombra. Non voglio che l'ombra per gli altri 3 lati.

È stato utile?

Soluzione

Fare questo: 

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

In realtà è molto più semplice, tutto ciò si imposta la sfocatura a (3 ° valore), impostare la diffusione (4 ° value) al negativo di esso.

Altri suggerimenti

È possibile utilizzare due elementi, uno dentro l'altro, e dare quella overflow: hidden esterna ed una larghezza uguale all'elemento interno insieme ad un'imbottitura basso in modo che l'ombra su tutti gli altri lati sono "cut off" 

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

In alternativa, l'elemento galleggiante esterno per causare a ridursi alle dimensioni dell'elemento interno. Vedere: http://jsfiddle.net/QJPd5/1/

Prova questo 

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

Si può vedere in http://jsfiddle.net/wJ7qp/

provare questo per ottenere il box-shadow sotto il pieno controllo. 

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

questo si applicherebbe esterno scatolare ombra pure.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top