Html 在所有方面创建一个 CSS3 框阴影，但一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1429605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a CSS3 box-shadow on all sides but one
提问by bloudermilk
I've got a tabbed navigation bar where I'd like the open tab to have a shadow to set it apart from the other tabs. I'd also like the whole tab section to have a single shadow (see bottom horizontal line) going up, shading the bottom of all tabs except for the open one.
我有一个选项卡式导航栏，我希望打开的选项卡具有阴影以将其与其他选项卡区分开来。我还希望整个选项卡部分有一个向上的阴影（见底部水平线），除了打开的选项卡之外，所有选项卡的底部都有阴影。
I'm going to use CSS3's box-shadowproperty to do it, but I can't figure out a way to shade only the parts I want.
我将使用 CSS3 的box-shadow属性来做这件事，但我想不出一种方法来只为我想要的部分着色。
Normally I'd cover up the bottom shadow of the open tab with the content area (higher z-index), but in this case the content area itself has a shadow so that would just wind up covering the tab.
通常我会用内容区域（更高z-index）覆盖打开选项卡的底部阴影，但在这种情况下，内容区域本身有一个阴影，因此只会覆盖选项卡。
Tab layout
标签布局
_______ _______ _______
| | | | | |
____|_______|__| |__|_______|______
Shadow line.
影线。
Shadow would go up from the horizontal lines, and outward of the vertical lines.
阴影会从水平线上升，并从垂直线向外。
_______
| |
_______________| |_________________
Hereis a live example:
这是一个活生生的例子：
Any help out there, geniuses?
各位大侠有什么帮助吗？
采纳答案by Peter
In your sample create a div inside #content with this style
在您的示例中，使用这种样式在 #content 中创建一个 div
#content_over_shadow {
padding: 1em;
position: relative; /* look at this */
background:#fff; /* a solid background (non transparent) */
}
and change #content style (remove paddings) and add shadow
并更改#content 样式（删除填充）并添加阴影
#content {
font-size: 1.8em;
box-shadow: 0 0 8px 2px #888; /* line shadow */
}
add shadows to tabs:
给标签添加阴影：
#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 */
}
回答by Kornel
Cut it off with overflow.
用溢出来切断它。
<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>
回答by Danny C
You can use multiple CSS shadows without any other divs to get desired effect, with the caveat of of no shadows around the corners.
您可以在没有任何其他 div 的情况下使用多个 CSS 阴影来获得所需的效果，但要注意角落周围没有阴影。
-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;
Overall though its very unintrusive.
总的来说，虽然它非常不引人注目。
回答by Silver Ringvee
One more, rather creative, way of solving this problem is adding :after or :before pseudo element to one of the elements. In my case it looks like this:
解决此问题的另一种颇具创意的方法是将 :after 或 :before 伪元素添加到元素之一。就我而言，它看起来像这样：
#magik_megamenu>li:hover>a:after {
height: 5px;
width: 100%;
background: white;
content: '';
position: absolute;
bottom: -3px;
left: 0;
}
See the screenshot, made the pseudo element red to make it more visible.
查看屏幕截图，将伪元素设为红色以使其更加可见。
回答by Bob Spryn
Personally I like the solution found here best: http://css3pie.com/demos/tabs/
我个人最喜欢这里找到的解决方案：http: //css3pie.com/demos/tabs/
It allows you to have a zero state or a hover state with a background color that still has the shadow from the content below overlaying it. Not sure that's possible with the method above:
它允许您拥有零状态或悬停状态，背景颜色仍然有来自下方内容的阴影覆盖在它上面。不确定上面的方法是否可行：
UPDATE:
更新：
Actually I was incorrect. You can make the accepted solution support the hover state shown above. Do this:
其实我错了。您可以使接受的解决方案支持如上所示的悬停状态。做这个：
Instead of having the positive relative on the a, put it on the a.active class with a z-index that is higher than your #content div below (which has the shadow on it) but is lower than the z-index on your content_wrapper.
而不是在 a 上有正相关，而是将它放在 a.active 类上，其 z-index 高于下面的 #content div（上面有阴影）但低于你的 z-index内容包装器。
For example:
例如：
<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>
then with your css:
然后用你的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 */
回答by Luke
If you are willing to use experimental technology with only partial support, you could use the clip-pathproperty.
如果您愿意在仅部分支持的情况下使用实验性技术，则可以使用该clip-path属性。
Update:clip-pathis now supported in all major browsers.
更新：clip-path现在所有主要浏览器都支持。
This will produce the desired effect: a box shadow on the top, left and right sides with a clean cut-off on the bottom edge.
这将产生所需的效果：顶部、左侧和右侧的框阴影，底部边缘有一个干净的切口。
In your case you would use clip-path: inset(px px px px); where the pixel values are calculated from the edge in question (see below).
在您的情况下，您将使用 clip-path: inset(px px px px); 其中像素值是从有问题的边缘计算出来的（见下文）。
#container {
box-shadow: 0 0 8px 2px #888;
clip-path: inset(-8px -8px 0px -8px);
}
This will clip the div in question at:
这将剪辑有问题的 div：
- 8 pixels above the top (to include the shadow)
- 8 pixels outside of the right edge (to include the shadow)
- 0 pixels from the bottom (to hide the shadow)
- 8 pixels outside of the left edge (to include the shadow)
- 顶部上方 8 像素（包括阴影）
- 右边缘外 8 个像素（包括阴影）
- 距底部 0 像素（隐藏阴影）
- 左边缘外 8 个像素（包括阴影）
Note that no commas are required between pixel values.
请注意，像素值之间不需要逗号。
The size of the div can be flexible.
div 的大小可以是灵活的。
回答by user2090657
you can cover up shadow using multiple box shadows as well.
您也可以使用多个框阴影来掩盖阴影。
box-shadow: 0 10px 0 #fff, 0 0 10px #ccc;
box-shadow: 0 10px 0 #fff, 0 0 10px #ccc;
回答by Rich Bradshaw
If you added two spans to hook onto then you could use two, something like:
如果您添加了两个跨度来挂钩，那么您可以使用两个，例如：
box-shadow: -1px -1px 1px #000;
on one span and
在一个跨度和
box-shadow: 1px -1px 1px #000;
on another. Might work!
另外一个。可能有用！
If the shadows overlap you could even use 3 shadows - one 1px to the left, one 1px to the right and one 1px up, or however thick you want them.
如果阴影重叠，您甚至可以使用 3 个阴影 - 一个向左 1px，一个向右 1px，一个向上 1px，或者无论您想要它们有多厚。
回答by user2162298
I did a sort of hack, not perfect, but it looks okay:
我做了一些 hack，不完美，但看起来没问题：
<ul class="tabs">
<li class="tab active"> Tab 1 </li>
<li class="tab"> Tab 2 </li>
<li class="tab"> Tab 3 </li>
</ul>
<div class="tab-content">Content of tab goes here</div>
SCSS
社会保障局
.tabs { list-style-type: none; display:flex;align-items: flex-end;
.tab {
margin: 0;
padding: 4px 12px;
border: 1px solid $vivosBorderGrey2;
background-color:$vivosBorderGrey2;
color: $vivosWhite;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-bottom: 0;
margin-right: 2px;
font-size: 14px;
outline: none;
cursor: pointer;
transition: 0.2s;
&.active {
padding-bottom: 10px;
background-color: #ffffff;
border-color: #eee;
color: $vivosMedGrey;
border-bottom-color: transparent;
box-shadow: 0px -3px 8px -3px rgba(0, 0, 0, 0.1);
}
&:hover {padding-bottom: 10px;
}
}
.tabContent {
border: 1px solid #eee;
padding:10px;
margin-top: -1px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
