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

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;
}

演示

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;
}