除了一边创build一个CSS3盒子阴影
我有一个选项卡式的导航栏，我希望打开的选项卡有一个阴影，使其与其他选项卡分开。 我也想整个标签部分有一个单一的阴影（见底部水平线）上升，除了打开的标签之外的所有标签底部的阴影。
我打算使用CSS3的box-shadow属性来做到这一点，但我无法想出一个方法来遮挡我想要的部分。
通常情况下，我会用内容区域（较高的z-index ）掩盖打开的标签的底部阴影，但是在这种情况下，内容区域本身有一个阴影，因此只会覆盖标签。
标签布局
_______ _______ _______
| | | | | |
____ | _______ | __ | | __ | _______ | ______
阴影线。
阴影会从水平线向上，垂直线之外。
_______
| |
_______________ | | _________________
这是一个生动的例子：
任何帮助，天才？
在你的示例中，使用这种风格在＃内容中创build一个div
#content_over_shadow { padding: 1em; position: relative; /* look at this */ background:#fff; /* a solid background (non transparent) */ }
并更改＃内容样式（删除填充）并添加阴影
#content { font-size: 1.8em; box-shadow: 0 0 8px 2px #888; /* line shadow */ }
为标签添加阴影：
#nav li a { margin-left: 20px; padding: .7em .5em .5em .5em; font-size: 1.3em; color: #FFF; display: inline-block; text-transform: uppercase; position: relative; box-shadow: 0 0 8px 2px #888; /* the shadow */ }
把它切掉，溢出。
<style type="text/css"> div div {box-shadow:0 0 5px #000; height:20px} div {overflow:hidden;height:25px; padding:5px 5px 0 5px} </style> <div><div>tab</div></div>
您可以使用多个CSS阴影而不用任何其他div来获得所需的效果，避免在angular落附近出现阴影。
-webkit-box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black; -moz-box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black; box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
总的来说虽然它非常不引人注目。
就我个人而言，我最喜欢在这里find的解决scheme： http : //css3pie.com/demos/tabs/
它允许你有一个零状态或hover状态的背景颜色仍然有下面的内容覆盖它的影子。 不知道以上的方法是可能的：
更新：
其实我错了 您可以使接受的解决scheme支持上面显示的hover状态。 做这个：
而不是在a上有正面的相对性，把它放在a.active类上，它的z-index高于下面的#content div（它有阴影），但低于你的z-index content_wrapper。
例如：
<nav class="ppMod_Header clearfix"> <h1 class="ppMod_PrimaryNavigation-Logo"><a class="ppStyle_Image_Logo" href="/">My company name</a></h1> <ul class="ppList_PrimaryNavigation ppStyle_NoListStyle clearfix"> <li><a href="/benefits">Benefits</a></li> <li><a class="ppStyle_Active" href="/features">Features</a></li> <li><a href="/contact">Contact</a></li> <li><a href="/company">Company</a></li> </ul> </nav> <div id="ppPage-Body"> <div id="ppPage-BodyWrap"> content goes here </div> </div>
然后用你的CSS：
#ppPage-Body box-shadow: 0 0 12px rgba(0,0,0,.75) position: relative /* IMPORTANT PART */ #ppPage-BodyWrap background: #F4F4F4 position: relative /* IMPORTANT PART */ z-index: 4 /* IMPORTANT PART */ .ppList_PrimaryNavigation li a:hover background: #656565 -webkit-border-radius: 6px 6px 0 0 -moz-border-radius: 6px 6px 0 0 border-radius: 6px 6px 0 0 .ppList_PrimaryNavigation li a.ppStyle_Active background: #f4f4f4 color: #222 -webkit-border-radius: 6px 6px 0 0 -moz-border-radius: 6px 6px 0 0 border-radius: 6px 6px 0 0 -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.75) -moz-box-shadow: 0 0 12px rgba(0,0,0,0.75) box-shadow: 0 0 12px rgba(0,0,0,0.75) position: relative /* IMPORTANT PART */ z-index: 3 /* IMPORTANT PART */
另外一个解决这个问题的方法就是在伪元素之前或之后添加一个元素。 在我的情况下，它看起来像这样：
#magik_megamenu>li:hover>a:after { height: 5px; width: 100%; background: white; content: ''; position: absolute; bottom: -3px; left: 0; }
看到截图，使伪元素红色，使其更加明显。
如果你添加了两个跨度钩，那么你可以使用两个，如：
box-shadow: -1px -1px 1px #000;
在一个跨度和
box-shadow: 1px -1px 1px #000;
另外一个。 可以工作！
如果阴影重叠，甚至可以使用3个阴影 – 一个1px到左边，一个1px到右边，一个1px，或者你想要的厚度。
您也可以使用多个阴影遮蔽阴影。
box-shadow：0 10px 0 #fff，0 0 10px #ccc;
如果您只愿意使用部分支持的实验技术，则可以使用clip-path属性 。
这将产生所需的效果：顶部，左侧和右侧的盒子阴影在底部边缘上具有干净的切断。
在你的情况下，你会使用剪辑path：inset（px px px px）; 其中像素值是从相关边缘计算出来的（见下文）。
#container { box-shadow: 0 0 8px 2px #888; clip-path: inset(-8px -8px 0px -8px); }
这将在下面的问题中剪切div：
- 顶部以上8个像素（包含阴影）
- 在右边缘以外8个像素（包含阴影）
- 从底部0像素（隐藏阴影）
- 左边缘外8个像素（包含阴影）
请注意，像素值之间不需要逗号。
div的大小可以是灵活的。
