1

我有一个DIV带有内部标签的A标签。DIV 的上边框有一个嵌入阴影，每个内部 A 标记都有一个右边框。如果 A 边框在阴影后面会更好看，但默认情况下，它在顶部。

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

欢迎任何想法。

解决方案：

我在没有额外元素的情况下使用 CSS:before 伪元素来做到这一点，如下所示：

.post-footer:before { -moz-box-sizing:border-box; 盒子阴影：0 7px 7px -7px #000000 插图；内容： ” ”; 显示：块；高度：7px；溢出：隐藏；位置：绝对；宽度：100%；z-index：1；}

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

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

4

2 回答 2

1

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

演示：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;
}

如果所有浏览器都支持边框渐变，您就可以实现这一点。您将制作一个看起来像父级阴影的渐变边框。

于 2013-05-08T23:19:26.183 回答
0

一种解决方案是在上面放置一个元素并为其设置阴影。例如：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); }
于 2013-05-08T23:22:01.720 回答