Question

<div class="row">
   some content

   <div class="info-box">
      some other content
   </div>
</div>


.row {
    float: left;
    margin-bottom: 1.5%;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    background-color: rgb(250, 250, 250);
    width: 685px;
    -webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    -o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
    box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
}


.row:hover {
    background-color: rgb(240, 245, 245);
    -moz-box-shadow:    inset 0 0 5px #4d4d4d;
   -webkit-box-shadow: inset 0 0 5px #4d4d4d;
   box-shadow:         inset 0 0 5px #4d4d4d;

}

.info-box {
    position: relative; 
    border-left: 1px solid #e3e3e3;
    padding: 15px;
    width: 170px;
    font-size: 0.93em;
    color: #363636;
    float: left;
}

好吧，我在行内有这个信息框。从.row：悬停，我正在创造一个内在的阴影。当您将鼠标悬停在行上时，信息框的左侧边框似乎显示在阴影的顶部。

我的问题是你是否可以在边框顶部制作阴影。提前致谢。

注意：z-index对我不起作用。

Answer 1

当然它在顶部：孩子必须出现在父母之上，否则它将被隐藏。要获得所需的效果，您必须将阴影应用于上面的元素，即.info-box之后。您可以使用:after pseudo-element

来实现此目标而无需额外标记

如果你看看this fiddle，我已经实现了基本命题 - 尽管你可能想要将边框移到伪元素或调整尺寸以使其恰好位于正确的位置。

我所做的基本指南：

给了.row CSS position: relative，这样我们就可以让孩子与之相关了。
将所有内容从.row:hover规则中的背景属性移至新的.row:hover:after规则。
添加content: ' '以强制显示伪元素。
添加了定位，高度和宽度，顶部和左侧，以使伪元素覆盖可用宽度。

编辑：Felipe 积分在评论中.row拦截任何点击:after内对象的企图都会被拦截元素，但建议您可以使用pointer events设置为pointer-events: none来缓解问题（在everything other than IE and Opera中）。我updated my example to show this in action。

如何在CSS边框上设置阴影？

1 个答案: