CSS Box Shadow Bottom Only

CssUnderlineBox Shadow

Css Problem Overview

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.

Css Solutions

Solution 1 - Css

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.

Solution 2 - Css

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

Solution 3 - Css

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/

Solution 4 - Css

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.

Categories
Recommended Css Solutions
Recommended Underline Solutions
Recommended Box Shadow Solutions

Previous Solution:

What is the python "with" statement designed for?

PythonLanguage FeaturesWith Statement

Next Solution:

Deep copy of a dict in python

PythonPython 3.x

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionWillingLearnerView Question on Stackoverflow
Solution 1 - CssSteve BView Answer on Stackoverflow
Solution 2 - CssYi JiangView Answer on Stackoverflow
Solution 3 - CssNeri BarakatView Answer on Stackoverflow
Solution 4 - CssSaeed TavoosiView Answer on Stackoverflow