仅限顶部，左侧和右侧的CSS3 Box阴影
问候，
我正在尝试将一个CSS3盒子阴影应用于DIV的顶部，右侧和左侧，其半径与以下CSS的结果相匹配（减去底部阴影）
#div { -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000; } 什么是最好的方法来完成这个？
谢谢！
更新这个阴影将被应用到页面上的导航栏，该栏位于主容器DIV的顶部。 我试图完成的是继续主DIV的盒子阴影到导航栏，它位于上面，但没有导航栏上的底部阴影。 看看网站本身 ，看看我在说什么，比在这里添加所有的HTML和CSS更容易。
更新2由于我正在使用的DIV是单数，而不是试图在每个导航里面放一个阴影，我select将其更改为以下内容：
-webkit-box-shadow: 0px -4px 7px #e6e6e6; -moz-box-shadow: 0px -4px 7px #e6e6e6; box-shadow: 0px -4px 7px #e6e6e6;
这使阴影的顶部非常明显，但这是我想要完成的 – 如果有人知道一种方法来保持阴影在容器DIV外观相同，请让我知道。 谢谢！
如果你只是用另一个div来覆盖底部，那么你会得到一致的阴影效果。
#servicesContainer { /*your css*/ position: relative; }
它是固定的！ 像魔术一样！
使用价差…
box-shadow具有以下值
box-shadow: xy blur spread color;
所以你可以使用像..
box-shadow: 0px -10px 10px -10px black;
更新：我添加一个jsfiddle
您可以将多个值赋予box-shadow属性
例如
-moz-box-shadow: 0px 10px 12px 0px #000, 0px -10px 12px 0px #000; -webkit-box-shadow: 0px 10px 12px 0px #000, 0px -10px 12px 0px #000; box-shadow: 0px 10px 12px 0px #000, 0px -10px 12px 0px #000;
它只是左右投影，你可以适应你的要求
我find了一个用“：after”覆盖阴影的方法，这里是我的代码：
#div:after { content:""; position:absolute; width:5px; background:#fff; height:38px; top:1px; right:-5px; }
下面的代码为我做了右侧的插图：
-moz-box-shadow: inset -10px 0px 10px -10px #000; -webkit-box-shadow: inset -10px 0px 10px -10px #000; box-shadow: inset -10px 0px 10px -10px #000;
希望它会帮助！
添加一个单独的答案，因为它是完全不同的。
您可以使用rgba并将alpha通道设置得较低（以获得透明度），以使您的投影不太明显。
尝试这样的事情（使用.5）
-webkit-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5); -moz-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5); box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
希望这可以帮助！
我有同样的问题，正在寻找一个可能的想法来解决这个问题。
我已经为我的标签已经有一些CSS，这是什么对我有用：
（特别注意padding-bottom: 2px;在#tabs #selected a {里面#tabs #selected a { 。这隐藏了底部box-shadow ，用下面的CSS对我很好用。）
#tabs { margin-top: 1em; margin-left: 0.5em; } #tabs li a { padding: 1 1em; position: relative; top: 1px; background: #FFFFFF; } #tabs #selected { /* For the "selected" tab */ box-shadow: 0 0 3px #666666; background: #FFFFFF; } #tabs #selected a { position: relative; top: 1px; background: #FFFFFF; padding-bottom: 2px; } #tabs ul { list-style: none; padding: 0; margin: 0; } #tabs li { float: left; border: 1px solid; border-bottom-width: 0; margin: 0 0.5em 0 0; border-top-left-radius: 3px; border-top-right-radius: 3px; }
以为我会把这个放在那里作为另一个可能的解决scheme，任何人都可以为此做好准备。
我知道这是非常古老的，但这些答案都没有帮助我，所以我加了我的答案。 这就像@ yichengliu的回答，使用了Pseudo ::after元素。
#div { position: relative; } #div::after { content: ''; position: absolute; right: 0; width: 1px; height: 100%; z-index: -1; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); } /*or*/ .filter.right::after { content: ''; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background: white; z-index: -1; -webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)); filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)); }
小提琴
如果您决定更改投影的X（ drop-shadow或drop-shadow第一个像素尺寸），更改宽度将有助于避免div和shadow之间存在白色空白。
如果您决定更改阴影的Y（ drop-shadow或阴影的第二个像素尺寸），更改高度将有助于出于上述相同的原因。
#div:before { content:""; position:absolute; width:100%; background:#fff; height:38px; top:1px; right:-5px; }
