CSS3箱子阴影在顶部，左，右只 [英] CSS3 Box Shadow on Top, Left, and Right Only

问题描述

问候，

我试图将CSS3框阴影应用于DIV的顶部，右侧和左侧，半径与以下CSS（减去底部阴影）

I am trying to apply a CSS3 box shadow to only the top, right, and left of a DIV with a radius that matches the result of the following CSS (minus the bottom shadow)

 #div {
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

最好的方法是什么？

谢谢！

UPDATE
此阴影将应用于页面上的导航栏，杆被定位在主容器DIV的顶部上。我想要完成的是继续主导DIV的框阴影到导航栏，它在它上面，但没有在导航栏上的底部阴影。请查看网站本身，看看我在说什么，比在此处添加所有HTML和CSS更容易。

UPDATE This shadow will be applied to a nav bar on a page, the bar is positioned on the top of the main container DIV. What I am trying to accomplish is to continue the box shadow of the main DIV onto the nav bar, which sits above it, but without a bottom shadow on the nav bar. Take a look at the site itself to see what I'm talking about, easier than adding all of the HTML and CSS here.

UPDATE 2
由于我使用的DIV是奇异的，而不是试图在每个导航li上放置阴影，我选择将其更改为以下：

UPDATE 2 Since the DIV I am working with is singular, rather than trying to place a shadow on each nav li, I elected to change it to the following:

-webkit-box-shadow: 0px -4px 7px #e6e6e6;
    -moz-box-shadow: 0px -4px 7px #e6e6e6;
    box-shadow: 0px -4px 7px #e6e6e6;

这使得阴影的顶部非常明显，但这是我想要完成的 - 一种方式保持阴影在外观上与容器DIV相同，请让我知道。谢谢！

This makes the top of the shadow very noticeable but it's what I am trying to accomplish - if anyone knows of a way to keep the shadow the same in appearance to the container DIV, please let me know. Thanks!

推荐答案

如果你只是用另一个div覆盖底部，你会得到一致的阴影。

It's better if you just cover the bottom part with another div and you will get consistent drop shadow across the board.

#servicesContainer {
  /*your css*/
  position: relative;
}

像魔法！

这篇关于CSS3箱子阴影在顶部，左，右只的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！