剪辑路径现在(2020年)是在元素的特定侧面实现盒影的最简单的方法之一，特别是当所需的效果是在特定边缘的“干净切割”阴影时(我相信这是OP最初寻找的)，像这样:

.shadow-element { 边框:1px实体#333; 宽度:100 px; 身高:100 px; Box-shadow: 0 0 15px rgba(0,0,0,0.75); 剪切路径:插入(0px -15px 0px 0px); ｝ < div class = " shadow-element " > < / div >

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

.shadow-element { 边框:1px实体#333; 宽度:100 px; 身高:100 px; Box-shadow: 15px 0px 15px -10px rgba(0,0,0,0.75); ｝ < div class = " shadow-element " > < / div >

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

box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Tpx Rpx Bpx Lpx);

地点:

Tpx设置上边缘的阴影可见性 Rpx正确 Bpx底部 Lpx左

对于应该隐藏阴影的任何边，输入一个0的值，对于应该显示阴影的任何边，输入一个负值(与盒子阴影模糊半径- Xpx相同)。

为了获得最多两面的剪裁效果，你可以使用带有背景渐变的伪元素。

header::before, main::before, footer::before, header::after, main::after, footer::after {
    display:    block;
    content:    '';
    position:   absolute;
    width:      8px;
    height:     100%;
    top:        0px;
}

header::before, main::before, footer::before {
    left:       -8px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

header::after, main::after, footer::after {
    right:      -8px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

将在通常组成文档的元素的左右添加一个漂亮的阴影效果。

div {
 border: 1px solid #666;
    width: 50px;
    height: 50px;
    -webkit-box-shadow: inset 10px 0px 5px -1px #888 ;
}

以下是为每一方演示的代码依赖，或工作片段:

.boxes { display: flex; flex-wrap: wrap; } .box { margin: 20px; border: 1px solid #ccc; font-family: Helvetica Neue, Arial, sans-serif; font-weight: 100; letter-spacing: 2px; color: #999; display: flex; align-items: center; justify-content: center; text-align: center; flex: 1; padding: 40px; line-height: 1.4em; } .top { box-shadow: 0 -5px 5px -5px #333; } .right { box-shadow: 5px 0 5px -5px #333; } .bottom { box-shadow: 0 5px 5px -5px #333; } .left { box-shadow: -5px 0 5px -5px #333; } <div class="boxes"> <div class="box top">Top Only</div> <div class="box right">Right Only</div> <div class="box bottom">Bottom Only</div> <div class="box left">Left Only</div> </div>

好的，再试一次。使用伪元素并在其上应用阴影盒属性。

html:

<div class="no-relevant-box">
  <div class="div-to-shadow-1"></div>
  <div class="div-to-shadow-2"></div>
</div>

萨斯:

.div-to-shadow-1, .div-to-shadow-2
  height: 150px
  width: 150px
  overflow: hidden
  transition: all 0.3s ease-in-out
  &::after
    display: block
    content: ''
    position: relative
    top: 0
    left: 100%
    height: 100%
    width: 10px
    border: 1px solid mediumeagreen
    box-shadow:  0px 7px 12px rgba(0,0,0,0.3)
  &:hover
    border: 1px solid dodgerblue
    overflow: visible

https://codepen.io/alex3o0/pen/PrMyNQ

我要做的是为阴影创建一个垂直块，并将它放在我的块元素应该在的地方。然后这两个块被包装成另一个块:

<div id="wrapper">
    <div id="shadow"></div>  
    <div id="content">CONTENT</div>  
</div>

<style>

div#wrapper {
  width:200px;
  height:258px;      
}

div#wrapper > div#shadow {
  display:inline-block;
  width:1px;
  height:100%;
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.8)
}

div#wrapper > div#content {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

</style>

jsFiddle的例子。