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

Right now when I do this:

-moz-box-sh开发者_运维问答adow: 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?

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;

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/

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.

Use a pseudo-element to cover the edge of the element you don't want to have a shadow. This is similar to ajcw's approach, but doesn't require manually adding the extra element every time — just once, in your CSS — and uses absolute positioning, which I think is much cleaner.

.nav-link.active {
  position: relative;
  box-shadow: 0 0 5px #888;
}

.nav-link.active::after {
  position: absolute;
  content: ' ';
  height: 7px;
  bottom: -8px;
  left: -5px;
  right: -5px;
  background-color: white;
  
  /*this one's only needed because we don't want this pseudo-element to be clickable*/
  pointer-events: none; 
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="p-4">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tab 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tab 3</a>
    </li>
  </ul>
</div>