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

Question

我想制作一个像这个网站一样的垂直标签，但我不能a在那个时候隐藏标签的右阴影和框的左阴影。这是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

有趣的演示因为它不是像素完美的。

您可以简化您的标记和调度和调整框阴影和背景。

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 之前所说）