我自制的解决方案很容易编辑:

HTML:

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>​

css:

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

演示: http://jsfiddle.net/jDyQt/103

我自制的解决方案很容易编辑:

HTML:

<div id="anti-shadow-div">
    <div id="shadow-div"></div>
</div>​

css:

#shadow-div{
    margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
    margin-left:0px; /* Set to 20px if you want shadow at the left side */
    margin-top:0px; /* Set to 20px if you want shadow at the top side */
    margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
    box-shadow: 0px 0px 20px black; 
    height:100px;
    width:100px;
    background: red;
}

#anti-shadow-div{
    margin:20px;
    display:table;
    overflow:hidden;
}​

演示: http://jsfiddle.net/jDyQt/103

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

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

是的，你可以使用box-shadow规则的阴影扩展属性:

.myDiv { 边框:1px实体#333; 宽度:100 px; 身高:100 px; Box-shadow: 10px 0 5px -2px #888; ｝ < div class = " myDiv " > < / div >

第四个属性-2px是阴影的扩展，你可以用它来改变阴影的扩展，使它看起来只在一边。

这也使用了阴影定位规则10px将其发送到右侧(水平偏移量)，0px将其保持在元素下方(垂直偏移量)。

5px是模糊半径:)

举个例子。

这可能是一个简单的方法

border-right : 1px solid #ddd;
height:85px;    
box-shadow : 10px 0px 5px 1px #eaeaea;

将此分配给任何div

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

<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的例子。