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

你必须使用多个盒子阴影;． 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 >

clip-path现在(2020)是我发现的在元素的特定侧面实现盒阴影的最佳方法，特别是当所需的效果是在特定边缘的“干净切割”阴影时，就像这样:

.shadow-element { 宽度:100 px; 身高:100 px; background - color: # FFC300; Box-shadow: 0 0 10px 5px rgba(0,0,0,0.75); 剪辑路径:插入(0px -15px 0px -15px); /*位置和左属性需要将元素从父元素的边缘带出来 这样影子就能被看见;左边距也可以实现相同的功能*/ 位置:相对; 左:15 px; ｝ < div class = " shadow-element " > < / div >

.．.而不是像这样减弱/减少/变薄的阴影:

.shadow-element { 宽度:100 px; 身高:100 px; background - color: # FFC300; 盒影:15px 0 15px -10px rgba(0,0,0,0.75)， -15px 0 15px -10px rgba(0,0,0,0.75); /*位置和左属性需要将元素从父元素的边缘带出来 这样影子就能被看见;左边距也可以实现相同的功能*/ 位置:相对; 左:15 px; ｝ < div class = " shadow-element " > < / div >

简单地将以下CSS应用到有问题的元素:

box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

地点:

Apx为顶部边缘设置阴影可见性 Bpx正确 Cpx底部 Dpx左

对于任何应该隐藏阴影的边，输入一个0的值，对于任何应该显示阴影的边，输入一个负值(与模糊半径+扩展值- Xpx + Ypx的组合结果相同)。

为了在图像的左右两侧或任何其他内容上有一个漂亮的嵌入阴影，可以这样使用它(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 >

我试图复制引导shadow-sm只是在右边，这是我的代码:

.shadow-rs{
    box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}

对于水平，你可以在它的父div上使用overflow欺骗box-shadow:

.parent { 溢出:隐藏; ｝ .box-shadow { Box-shadow: 0 5px 5px 0 #000; ｝ < div class = "父" > < div class = "不必“>内容div > < / < / div >