我有一个标签式导航栏,我希望打开的标签有一个阴影,使其与其他标签区分开来.我还希望整个标签部分有一个阴影(见底部水平线)向上,阴影除了打开的所有选项卡的底部.
我将使用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 */
}
用溢出来切断它.
tab
您可以使用多个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;
整体虽然非常不引人注目.
另一个,相当有创意的解决这个问题的方法是添加:after或:之前的伪元素到其中一个元素.就我而言,它看起来像这样:
#magik_megamenu>li:hover>a:after { height: 5px; width: 100%; background: white; content: ''; position: absolute; bottom: -3px; left: 0; }
查看屏幕截图,将伪元素设置为红色以使其更加明显.
就个人而言,我最喜欢这里找到的解决方案:http://css3pie.com/demos/tabs/
它允许您具有零状态或悬停状态,背景颜色仍然具有来自下面内容的阴影覆盖它.不确定上述方法是否可行:
更新:
其实我不对.您可以使接受的解决方案支持上面显示的悬停状态.做这个:
而不是在a上使用正相关,而是将它放在a.active类上,其z-index高于下面的#content div(其上有阴影),但是低于你的z-index content_wrapper.
例如:
content goes here
然后用你的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 */