HTML CSS examples for CSS Property:box-shadow
Make "box-shadow" of div above of its parent's :before/:after
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> *, *:before, *:after {<!--from ww w. j a v a 2s.c om--> -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } html, body { width:100%; height:100%; padding:11px; } div.outer { border:6px solid Chartreuse; width:401px; height:91%; position:relative; } div.inner { border:6px solid yellow; background:blue; width:81%; height:100%; margin:auto; -webkit-box-shadow:0 0 2.6em 0.6em red; -khtml-box-shadow:0 0 2.6em 0.6em red; -moz-box-shadow:0 0 2.6em 0.6em red; -ms-box-shadow:0 0 2.6em 0.6em red; -o-box-shadow:0 0 2.6em 0.6em red; box-shadow:0 0 2.6em 0.6em red; } div.outer:before, div.outer:after { z-index:-2; content:''; -webkit-background-size:11% 100%; -khtml-background-size:11% 100%; -moz-background-size:11% 100%; -ms-background-size:11% 100%; -o-background-size:11% 100%; background-size:11% 100%; width:11%; height:100%; position:absolute; top:0; } div.outer:before { background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat left bottom fixed; left:0; } div.outer:after { background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat left bottom fixed; right:0; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>