在除一侧之外的所有侧面上创建 CSS3 框阴影
题
我有一个选项卡式导航栏,我希望打开的选项卡有一个阴影,以将其与其他选项卡区分开来。我还希望整个选项卡部分有一个向上的阴影(参见底部水平线),遮蔽除打开的选项卡之外的所有选项卡的底部。
我将使用 CSS3 box-shadow
财产来做到这一点,但我无法找到一种方法来只遮蔽我想要的部分。
通常我会用内容区域覆盖打开选项卡的底部阴影(较高 z-index
),但在这种情况下,内容区域本身有一个阴影,因此最终会覆盖选项卡。
选项卡布局
_______ _______ _______ | | | | | | ____|_______|__| |__|_______|______
阴影线。
阴影将从水平线向上,并从垂直线向外延伸。
_______ | | _______________| |_________________
这里 是一个活生生的例子:
各位高手有什么帮助吗?
解决方案
在您的示例中,使用此样式在#content中创建一个div
#content_over_shadow {
padding: 1em;
position: relative; /* look at this */
background:#fff; /* a solid background (non transparent) */
}
并更改#content样式(删除填充)并添加阴影
#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来获得所需的效果,但需要注意角落周围没有阴影。
-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;
总的来说,虽然它非常不引人注目。 就个人而言,我最喜欢这里找到的解决方案: http://css3pie.com/demos/tabs/
它允许您具有零状态或悬停状态,背景颜色仍然具有来自下面内容的阴影覆盖它。不确定上述方法是否可行:
更新:
其实我不对。您可以使接受的解决方案支持上面显示的悬停状态。这样做:
不是在a上使用正相关,而是将其放在a.active类上,其z-index高于下面的#content div(其上有阴影),但是低于z- 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 */
你也可以使用多个框阴影掩盖阴影。
box-shadow:0 10px 0 #fff,0 0 10px #ccc;
如果您添加了两个跨度,那么您可以使用两个,例如:
box-shadow: -1px -1px 1px #000;
在一个范围内
box-shadow: 1px -1px 1px #000;
另一个。可能会工作!
如果阴影重叠,你甚至可以使用3个阴影 - 左边一个1px,右边一个1px,一个1px,或者你想要的厚度。
如果您愿意仅使用实验技术 部分支持, ,你可以使用 clip-path
财产.
这将产生所需的效果:顶部、左侧和右侧都有一个盒子阴影,底部边缘有一个干净的切口。
在您的情况下,您将使用剪辑路径:插图(像素 像素 像素 像素);其中像素值是根据相关边缘计算的(见下文)。
#container {
box-shadow: 0 0 8px 2px #888;
clip-path: inset(-8px -8px 0px -8px);
}
这会将有问题的 div 剪辑在:
- 顶部上方 8 个像素(包括阴影)
- 右边缘外 8 个像素(包括阴影)
- 距底部 0 像素(隐藏阴影)
- 左边缘外侧 8 个像素(包括阴影)
请注意,像素值之间不需要逗号。
div的大小可以灵活调整。
我做了一些黑客,不完美,但看起来还不错:
<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);
}