为了在图像的左右两侧或任何其他内容上有一个漂亮的嵌入阴影，可以这样使用它(z-index:-1在显示带有嵌入的图像或内部对象时做了一个很好的技巧):

.shadowcontainer { 显示:inline-flex; 框影:插入-40px 0px 30px -30px rgba(0,0,0,0.9)，插入40px 0px 30px -30px rgba(0,0,0,0.9); ｝ .innercontent { z - index: 1 ｝ < div class = " shadowcontainer”> <img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/> < / div >

在某些情况下，你可以用另一个容器来隐藏阴影。例如，如果在DIV的上面和下面有一个DIV的阴影，你可以使用position: relative;z - index: 1;周围的DIVs。

另一种方法是使用overflow-y:隐藏在带有填充的父类上:

身体{ 填充:30 px; ｝ #包装{ overflow-y:隐藏; 填充:0 10px; ｝ #包装> div { 宽度:100 px; 身高:100 px; Box-shadow: 0 0 20px -5px红色; ｝ < div id = " wrap " > < div > < / div > < / div >

另一个想法可能是创建一个暗模糊的伪元素，最终与透明度模仿阴影。让它的高度稍低，宽度稍宽。

试试这个，对我很管用:

    box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;

你必须使用多个盒子阴影;． Inset属性使它看起来很漂亮，在里面:

div { 框影:插入0 12px 15px -4px rgba(31, 73, 125, 0.8)，插入0 -12px 8px -4px rgba(31, 73, 125, 0.8); 宽度:100 px; 身高:100 px; 保证金:50 px; 背景:白色; ｝ < div > < / div >