防止框阴影出现在元素的左/右边框下方？

Question

我正在将一个盒子阴影应用于具有左右边框的元素。

我希望框阴影停止，这样就不会出现在这些边框下面。

有没有办法在没有太多疯狂包装的情况下实现这一目标？

<div id="button">Box-shadow, stop before the red borders!</div>

这是一个JSFiddle：http://jsfiddle.net/AHUEY/

Answer 1

您可以使用相对于目标绝对定位的伪元素而不是框阴影来执行此操作：

#button {
    position: relative;
    background: #ccc;
    text-align: center;
    width: 400px;
    border-left: 10px solid red;
    border-right: 10px solid red;
}

#button::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 5px;
    background: black;
}

demo

Answer 2

将border-right和border-left替换为box-shadow：

#button {
background: #ccc;
text-align: center;
width: 400px;
box-shadow: 10px 0 0 0 red, -10px 0 0 0 red, 0 5px 0 0 black;
}

http://jsfiddle.net/eEnpp/

Answer 3

可以使用框阴影的展开参数。

请看工作小提琴 http://jsfiddle.net/prashant_11235/dkR4H/

#button {
    background: #ccc;
    text-align: center;
    width: 400px;
    height: 25px;
    border-left: 10px solid red;
    border-right: 10px solid red;
    box-shadow: 0px 15px 0px -10px black;
}