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

<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之后，我创建了一个内在的影子。当您将鼠标悬停在行上时，信息框的左侧边框似乎显示在阴影的顶部。如何在CSS边框上设置阴影？

我的问题是如果你可以使阴影在边界之上。提前致谢。

注意：z-index不适用于我。

来源

2013-02-19 tipsywacky

请提供最小的HTML代码和/或jsfiddle – FelipeAls 2013-02-19 21:04:10

我已经添加了html代码。感谢提醒。 – tipsywacky 2013-02-19 21:07:10

'border-radius'属性不需要这么多的前缀。检查兼容性表[caniuse]（http://caniuse.com/#search=border-radius）（“显示所有版本”）。 '-moz-'用于Fx 3.6（可能在一些公司和Linux发行版中使用，不是更多），Saf 4.0，iOS 3.2和Android 2.1的'-webkit-'。 MS和Opera从未使用过这个的前缀 – FelipeAls 2013-02-20 04:12:36

当然，它是最重要的：孩子必须出现在父母之上，否则它会被隐藏。为了达到预期的效果，您必须将阴影应用于上面的元素，即在.info-box之后。您可以通过使用:afterpseudo-element而无需额外标记来实现此目的。

如果你看看this fiddle，我已经实现了基本命题 - 尽管你可能想要将边界转换为伪元素或调整尺寸以使其定位恰到好处。

基本指导我做了什么：

给了.row的CSS position: relative，所以我们可以把孩子相对于它。
将规则的.row:hover规则中的背景属性移至新的.row:hover:after规则。
添加content: ' '强制显示伪元素。
添加了定位，高度和宽度，顶部和左侧，使伪元素覆盖可用宽度。

编辑：费利佩点出的意见，任何企图通过点击内.row将由:after元素被监听对象，但是建议您可以使用pointer events设置为pointer-events: none，以缓解这个问题（在everything other than IE and Opera）。我有updated my example to show this in action。

来源

2013-02-19 21:23:33 Barney

空的'content：'''就足够了。宽度和高度可以替换为：'left：-1px; right：3px;顶部：-1px;底部：0;'，例如，更精细的定位（如果需要）。 – FelipeAls 2013-02-20 04:05:55

使用'.row：hover：{pointer-events：none;}后可以实现（在某些浏览器上，不是全部！）点击'：after *“* layer * }'。这允许正常的行为，如点击.info-box中的链接或选择文本。 – FelipeAls 2013-02-20 04:18:06

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

回答

相关问题