CSS Box Shadow Bottom Only

Question

How can I do this  I want my element to look as though it has a shadow underline  I don t want the shadow for the other 3 sides

User · Answer

try this to get the box-shadow under your full control.

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

this would apply to outer box-shadow as well.

User · Answer

Do this                       box-shadow  0 4px 2px -2px gray    It s actually much simpler  whatever you set the blur to  3rd value   set the spread  4th value  to the negative of it

User · Answer

You can use two elements  one inside the other  and give the outer one overflow  hidden and a width equal to the inner element together with a bottom padding so that the shadow on all the other sides are  cut off    outer       width  100px      overflow  hidden      padding-bottom  10px      outer  gt  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       Alternatively  float the outer element to cause it to shrink to the size of the inner element  See  http   jsfiddle net QJPd5 1

User · Answer

Try this   -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     You can see it in http   jsfiddle net wJ7qp

[css] CSS Box Shadow Bottom Only

Examples related to css

Examples related to underline

Examples related to box-shadow