使div的“box-shadow”高于其父级：在/之后

Question

我希望div的css box-shadow 超出其父级的：之前＆amp; ：在伪元素之后。

这是你的尝试：

fiddle

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    padding: 10px;
}
div.outer {
    border: 5px solid #000;
    background: #ccc;
    width: 400px;
    height: 90%;
    position: relative;
}
div.inner {
    border: 5px solid blue;
    background: #fff;
    width: 80%;
    height: 100%;
    margin: auto;
    -webkit-box-shadow: 0 0 1.5em 0.5em red;
    -khtml-box-shadow: 0 0 1.5em 0.5em red;
    -moz-box-shadow: 0 0 1.5em 0.5em red;
    -ms-box-shadow: 0 0 1.5em 0.5em red;
    -o-box-shadow: 0 0 1.5em 0.5em red;
    box-shadow: 0 0 1.5em 0.5em red;
}
div.outer:before, div.outer:after {
    content:'';
    -webkit-background-size: 10% 100%;
    -khtml-background-size: 10% 100%;
    -moz-background-size: 10% 100%;
    -ms-background-size: 10% 100%;
    -o-background-size: 10% 100%;
    background-size: 10% 100%;
    width: 10%;
    height: 100%;
    position: absolute;
    top: 0;
}
div.outer:before {
    background: url(https://freebestwallpaper.files.wordpress.com/2012/02/amazing-background-1.png) no-repeat left bottom fixed;
    left: 0;
}
div.outer:after {
    background: url(https://freebestwallpaper.files.wordpress.com/2012/02/amazing-background-1.png) no-repeat left bottom fixed;
    right: 0;
}

<div class="outer">
  <div class="inner"></div>
</div>

正如您所注意到的，红色框阴影从其父级（顶部/底部的黑色边框）中消失。

我希望上面 绿色左/右边。

提前致谢。

Answer 1

为假设置z-index: -1并从父项中删除背景就可以了。

fiddle

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    padding: 10px;
}
div.outer {
    border: 5px solid #000;
    width: 400px;
    height: 90%;
    position: relative;
}
div.inner {
    border: 5px solid blue;
    background: #fff;
    width: 80%;
    height: 100%;
    margin: auto;
    -webkit-box-shadow: 0 0 1.5em 0.5em red;
    -khtml-box-shadow: 0 0 1.5em 0.5em red;
    -moz-box-shadow: 0 0 1.5em 0.5em red;
    -ms-box-shadow: 0 0 1.5em 0.5em red;
    -o-box-shadow: 0 0 1.5em 0.5em red;
    box-shadow: 0 0 1.5em 0.5em red;
}
div.outer:before, div.outer:after {
    z-index: -1;
    content:'';
    -webkit-background-size: 10% 100%;
    -khtml-background-size: 10% 100%;
    -moz-background-size: 10% 100%;
    -ms-background-size: 10% 100%;
    -o-background-size: 10% 100%;
    background-size: 10% 100%;
    width: 10%;
    height: 100%;
    position: absolute;
    top: 0;
}
div.outer:before {
    background: url(https://freebestwallpaper.files.wordpress.com/2012/02/amazing-background-1.png) no-repeat left bottom fixed;
    left: 0;
}
div.outer:after {
    background: url(https://freebestwallpaper.files.wordpress.com/2012/02/amazing-background-1.png) no-repeat left bottom fixed;
    right: 0;
}

<div class="outer">
    <div class="inner"></div>
</div>