javascript - 隐藏右框阴影以制作垂直制表符

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;
}