Question

我有DIV内部A - 标签。 DIV的顶部边框有一个插入阴影，每个内部A标签都有一个右边框。如果A边界位于阴影后面会更好看，但默认情况下，它位于顶部。

请看我的jsFiddle。 http://jsfiddle.net/X7475/

欢迎任何想法。

解决方案：

我在没有额外元素的情况下使用CSS：在伪元素之前这样做：

.post-footer：在{之前 -moz-box-sizing：border-box; box-shadow：0 7px 7px -7px＃000000 inset; 内容：“”; 显示：块; 身高：7px; 溢出：隐藏; 位置：绝对; 宽度：100％; z-index：1; }

小提琴：http://jsfiddle.net/X7475/4/

当然这实际上是像素转换到最好的，但我仍然认为它值得视觉效果。

Answer 1

如果您可以妥协a标签的可点击区域顶部的10px，这里有一个解决方法来实现您的需求：

演示： http://jsfiddle.net/X7475/3/

HTML：

<div class="post-footer">
    <div class="topShadow"></div>
    <div class="buttons"> 
        <a>7</a>
        <a>3w</a>
        <a>Raphael</a>
        <a>229</a>
    </div>
</div>

CSS：

.post-footer {
    background: none repeat scroll 0 0 #323232;
    height: 40px;
    text-align: right;
    z-index: 9;
    position: relative;
}
.topShadow {
    position:absolute;
    top: 0;
    left: 0;
    width:100%;
    height:10px;
    border-top: medium none;
    box-shadow: 0 10px 10px -7px #000000 inset;
    z-index:1;
}
.post-footer a {
    border-right: 1px solid #7E7E7E;
    color: #D3D3D3;
    float: left;
    font-size: 0.8em;
    padding: 12px 17px;
    position: relative;
}
a:hover {
    background-color:#f00;
}

如果所有浏览器都支持边框渐变，则可以实现此目的。您可以创建一个看起来像父阴影的渐变边框。

Answer 2

一种解决方案是在上面放置一个元素并在其上设置阴影。例如：http://jsfiddle.net/NAv4Q/43/

这样您就不会阻止悬停访问链接按钮的任何部分。缺点是你必须为额外的元素腾出空间。（如果你已经有一个元素，那不是问题。）

元素必须至少与阴影一样高，否则阴影会变弱（至少在Firefox中）。

<div class="shadow"></div>
<div class="post-footer">
    <div class="buttons">
        <a>7</a>
        <a>3w</a>
        <a>Raphael</a>
        <a>229</a>
    </div>
</div>

和css：

.post-footer {
background: none repeat scroll 0 0 #323232;
height: 3.2em;
text-align: right;
z-index: 9;
position: relative;
font-size: 0.8em;
}

.post-footer a {
border-right: 1px solid #7E7E7E;
color: #D3D3D3;
float: left;
line-height: 3.2em;
padding: 0 1.5em;
position: relative;
}

.shadow {
height: 12px;
position: relative;
z-index: 10;
box-shadow: 0 12px 9px -2px #000;
}

a:hover { background: rgba(100,100,255,0.3); }

儿童元素边界在父母的插入阴影后

2 个答案: