隐藏右侧框阴影以制作垂直标签

Question

我想创建一个像this网站这样的垂直标签，但是我无法隐藏a标签的正确阴影和该点框的左侧阴影。 here是jsfiddle代码

Answer 1

这应该让你前进：Fiddle Fork

主框阴影必须位于“标签”下方，而框内显示的内容必须覆盖它们。实现此目的的唯一方法是为主内容提供比选项卡更低的z-index。

诀窍是使用overflow:hidden以及li元素的已定义大小。这会导致阴影中超出规定边界的部分被切断。

CSS

.chooseLogo li{
    list-style: none outside none;
    list-style: none;
    margin-top:0px;
    padding-top:10px;
    overflow:hidden;
    width:60px;
    height:30px;
}

.chooseLogo a{
    background: none repeat scroll 0 0 #fff;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 10px #777;
    padding: 2px 20px 1px;
    position: relative;
    text-decoration: none;
    z-index:10;
}

.mainContent{
    width:610px;
    height:371px;
    border-radius: 0px 4px 4px 4px;
    box-shadow: 0 0 5px #999;
    position: absolute;
    left:60px;
    background-color:white;
    z-index:1;
}

Answer 2

DEMO 因为它不是像素完美的有趣原因。

您可以简化标记，发送和调整框阴影和背景。

HTML

<div class="container">
  <ul>
    <li> <a href> link item</a></li>
    <li> <a href> link item</a></li>
    <li> <a href> link item</a></li>
  </ul>
  <div class="content">
    <p>Content</p>
  </div>
</div>

CSS

.container {
  width:80%;
  margin:1em auto;
  box-shadow:2px -2px 1px;
  border-radius:1em;
}
ul {
  margin:0 0 0 -2px;
  padding: 1em ;
  border-radius:1em 0 0 1em;
  float:left;
  box-shadow:-2px 1px 1px 1px;
  background:white;
    position:relative;
}
.content {
  overflow:hidden;
  border-radius:0 1em 1em 1em;
  box-shadow:1px 1px 2px 2px;
  min-height:15em;
}
ul, .content {
  background:turquoise;
}
ul:after {
  content:'';
  height:1.2em;
  width:2em;
  top:100%;
  margin-top:1px;
  right:1px;
  position:absolute;
  float:right;
  border-radius:0 1em 0 0;
  box-shadow: 1px -1px 1px,
    4px -4px 0 4px turquoise;
}
li {
  margin:1em 0 ;
}

body {
  background:#888;
}

注意：使用z-index也可以隐藏一些部分。（正如Austin Mullins和Filth先前所说）