CSS3 Question: how to have no box shadow on the top of a div?

问题

Right now when I do this:

-moz-box-shadow: 0 0 200px #00C0FF;
-webkit-box-shadow: 0 0 200px #00C0FF;
box-shadow: 0 0 200px #00C0FF;

it gives a box shadow on all sides. I want it on 3 sides but not the top. How to prevent the shadow from appearing at the top?

回答1:

If you can nest two divs then you should be able to use a combination of margins and overflow:hidden to 'chop off' the top shadow without losing the required effect on the other edges.

For example this mark-up:

<div class="outer">
    <div class="inner">hello</div>
</div>

And this CSS

.outer {
    margin-top: 200px;
    overflow: hidden;   
}

.inner {
    width:200px;
    height: 200px;
    margin: 0 200px 200px 200px;
    -moz-box-shadow: 0px 5px 200px #00C0FF;
    -webkit-box-shadow: 0px 5px 200px #00C0FF;
    box-shadow: 0px 5px 200px #00C0FF;
}

Gives this result - http://jsfiddle.net/ajcw/SLTE7/2/

回答2:

box-shadow support multiple commas which mean this is possible and can be done like below:

box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;

The first group bring shadow to the right & bottom while the second group bring shadow to the left (by using negative value) & bottom.

The complete code for cross browser support is:

-moz-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
-webkit-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;

回答3:

Just have a vertical offset only:

.shadow {
  -moz-box-shadow: 0px 5px 200px #00C0FF;
  -webkit-box-shadow: 0px 5px 200px #00C0FF;
  box-shadow: 0px 5px 200px #00C0FF;
}

This will shift the shadow down so that the top has less of a shadow. You will have to play with it to get it the way you want it in your situation. This site also has some great info on box shadows, such as layering, as well as browser support.

来源：https://stackoverflow.com/questions/5665341/css3-question-how-to-have-no-box-shadow-on-the-top-of-a-div

标签

css

css3