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

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:hover 开始，我正在创建一个内部阴影。当您将鼠标悬停在行上时，信息框的左边框似乎显示在阴影的顶部。

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

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

Answer 1

当然是在上面: child 必须出现在 parent 之上，否则它会被它隐藏。要达到预期的效果，您必须将阴影应用于上方的元素，即 .info-box 之后的元素。您可以通过使用 :after pseudo-element 来实现这一点，而无需额外的标记。 .

如果你看一下this fiddle ，我已经实现了基本命题 — 尽管您可能希望将边框移动到伪元素或调整尺寸以使其恰到好处地定位。

我所做的基本指南:

1. 为 .row 提供 CSS position: relative，这样我们就可以根据它放置子项。
2. 将 .row:hover 规则中除背景属性之外的所有内容移至新的 .row:hover:after 规则。
3. 添加了 content: ' ' 以强制显示伪元素。
4. 添加了定位、高度和宽度、顶部和左侧以使伪元素覆盖可用宽度。

编辑:Felipe 在评论中指出任何试图点击进入 .row 内的对象的行为都会被 :after 元素，但建议您可以使用 pointer events设置为 pointer-events: none 以缓解问题(在 everything other than IE and Opera 中)。我有 updated my example to show this in action .