0

我有一个我正在尝试的jsFiddle ：

我的问题是让<li>元素在内部下降 1 个像素，<ul>因此它们的边框将覆盖<ul>边框。

我希望这可以在没有额外标记的情况下完成，但我遇到了麻烦。

有任何想法吗？

<ul class="tabs">
    <li class="act">Active</li>
    <li>Not Active</li>
</ul>

body {background:#eee;}
ul
{
   margin:10px; padding-left:20px;
   overflow:hidden;
   border-bottom:solid 1px rgba(0,0,0,.2);
}
li
{
   display:inline-block; margin-right:1px;
   border-bottom:solid 1px transparent; border-radius:7px 7px 0 0;
   height:35px; padding:0 9px;
   font:bold 12px/35px Arial; color:#444;
}
li.act
{
   border-bottom:solid 1px #D4D4D4;
   box-shadow:0 1px rgba(255, 255, 255, 0.75) inset, 0 2px 5px rgba(0, 0, 0, 0.5);              

   background: -moz-linear-gradient(top, #EDEDED 0%, #D4D4D4 65%);
   background: -webkit-linear-gradient(top, #EDEDED 0%, #D4D4D4 65%);
}
4

1 回答 1

2

ul拥有border-bottom and 将无法实现您想要的overflow:hidden，因为您li将在边界之前（上方）被切断。

我看到你希望你ul保留overflow:hidden隐藏li的box-shadow。没关系，但我们需要伪造边界。我们可以通过创建一个伪元素来做到这一点，并将其放在li's 后面。这是 CSS 和一个分叉的 JSFiddle：http: //jsfiddle.net/rgthree/2xfkB/

ul {
   position:relative;
   margin:10px; padding-left:20px;
   overflow:hidden;
}
ul:before{
    content:'\0020';
    display:block; height:1px; overflow:hidden;
    position:absolute; bottom:0px; left:0px; right:0px; z-index:1;
    background:rgba(0,0,0,.2);
}
li {
    position:relative; z-index:2; /* position on top of "border" pseudo-element */
    display:inline-block; margin-right:1px;
    border-bottom:solid 1px transparent; border-radius:7px 7px 0 0;
    height:35px; padding:0 9px;
    font:bold 12px/35px Arial; color:#444;
}
li.act{
    border-bottom:solid 1px #D4D4D4;
    box-shadow:0 1px rgba(255, 255, 255, 0.75) inset, 0 2px 5px rgba(0, 0, 0, 0.5);              
    background: -moz-linear-gradient(top, #EDEDED 0%, #D4D4D4 65%);
    background: -webkit-linear-gradient(top, #EDEDED 0%, #D4D4D4 65%);
}​
于 2012-04-06T01:15:34.547 回答