任何可以在左边获得盒子阴影的方法右（水平？）侧面只有没有黑客或图像。我正在使用：
box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);
但是它给了阴影。
我的元素没有边界。
答案 0 :(得分：250)
注意：我建议您查看以下@Hamish's answer;它不涉及这里描述的解决方案中不完美的“掩蔽”。
你可以接近多个盒子阴影;每一方一个
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
修改
为顶部和底部向前添加2个框阴影，以遮盖透过的颜色。
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
答案 1 :(得分：160)
我对Deefour解决方案中存在的阴影的圆顶和底部不满意，因此创建了我自己的阴影。
<强> See demo here 即可。
插图box-shadow;创建一个漂亮的均匀阴影，顶部和底部被切断：
box-shadow: -15px 0 15px -15px inset;
要在元素的两侧使用此效果，请创建两个绝对位于原始元素两侧的伪元素:before和:after。
div {
position: relative;
}
div:before {
box-shadow: -15px 0 15px -15px inset;
content: " ";
height: 100%;
left: -15px;
position: absolute;
top: 0;
width: 15px;
}
etc...
答案 2 :(得分：25)
试试这个，它对我有用：
box-shadow: -5px 0 5px -5px #333, 5px 0 5px -5px #333;
答案 3 :(得分：23)
CSS box-shadow使用4个参数： h-shadow，v-shadow，blur，spread：
box-shadow: 10px 0 8px -8px black;
v-shadow （verical shadow）设置为0.
模糊 参数会添加渐变效果，但在垂直边框（我们想要摆脱的边框）上也会添加一点阴影。
否定 传播 会减少所有边框上的阴影：您可以使用它来尝试移除那个小垂直阴影，而不会影响太多侧面的阴影（它更容易对于小阴影，5到10px。）
这是一个fiddle示例。
在元素中添加一个空div，并使用绝对定位对其进行样式设置，以免影响元素内容。
此处fiddle带有左影的示例。
<div id="container">
<div class="shadow"></div>
</div>
.shadow{
position:absolute;
height: 100%;
width: 4px;
left:0px;
top:0px;
box-shadow: -4px 0 3px black;
}
如果你有固定的背景，你可以用两个具有相同背景颜色和blur = 0的遮罩阴影隐藏侧阴影效果，例如：
box-shadow:
0 -6px white, // Top Masking Shadow
0 6px white, // Bottom Masking Shadow
7px 0 4px -3px black, // Left-shadow
-7px 0 4px -3px black; // Right-shadow
我再次向黑色阴影添加了负展开（-3px），因此它不会延伸到角落之外。
这里是fiddle。
答案 4 :(得分：7)
clip-path现在（2020年）是我发现在元素的特定侧面上实现箱形阴影的最佳方法，尤其是当所需的效果是特定边缘的“干净”阴影时 strong>，像这样：
.shadow-element {
width: 100px;
height: 100px;
background-color: #FFC300;
box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px -15px);
/* position and left properties required to bring element out from edge of parent
so that shadow can be seen; margin-left would also achieve the same thing */
position: relative;
left: 15px;
}<div class="shadow-element"></div>
...与这样的衰减/缩小/细化阴影相反：
.shadow-element {
width: 100px;
height: 100px;
background-color: #FFC300;
box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75);
/* position and left properties required to bring element out from edge of parent
so that shadow can be seen; margin-left would also achieve the same thing */
position: relative;
left: 15px;
}<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的组合结果相同）显示。
答案 5 :(得分：4)
这适用于所有浏览器：
-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
答案 6 :(得分：4)
另一种方法是：overflow-y:hidden在带有填充的父级上。
#wrap {
overflow-y: hidden;
padding: 0 10px;
}
#wrap > div {
width: 100px;
height: 100px;
box-shadow: 0 0 20px -5px red;
}
答案 7 :(得分：3)
<强> DEMO
您必须使用多个box-shadow;。插入属性使其看起来很漂亮并且内部
div {
box-shadow: inset 0 12px 15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}
答案 8 :(得分：1)
box-shadow: box-shadow: 0 5px 5px 0 #000;
它对我有效。希望对您有帮助。
答案 9 :(得分：0)
对于图像或任何其他内容的右侧和左侧的漂亮插入阴影，请按照这种方式使用
*** z-index：-1在使用插图显示图像或内部对象时做了一个很好的技巧
<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>
<style>
.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}
.innercontent{
z-index:-1
}
</style>
</html>
答案 10 :(得分：0)
在某些情况下，您可以通过其他容器隐藏阴影。例如，如果有阴影的DIV上方和下方有DIV，您可以在周围的DIV上使用position: relative; z-index: 1;。
答案 11 :(得分：0)
仅对于水平，您可以使用其父div上的溢出来欺骗box-shadow：
<div class="parent">
<div class="box-shadow">content</div>
</div>
.parent{
overflow:hidden;
}
.box-shadow{
box-shadow: box-shadow: 0 5px 5px 0 #000;
}
答案 12 :(得分：0)
另一个想法可能是创建一个黑暗模糊的伪元素，最终用透明模仿阴影。使它的高度和宽度略小，例如。
答案 13 :(得分：0)
您可以在其中使用1 div来“擦除”阴影：
.yourdiv{
position:relative;
width:400px;
height:400px;
left:10px;
top:40px;
background-color:white;
box-shadow: 0px 0px 1px 0.5px #5F5F5F;
}
.erase{
position:absolute;
width:100%;
top:50%;
height:105%;
transform:translate(0%,-50%);
background-color:white;
}
您可以玩“ height：％;”和“宽度：％；”消除想要的阴影。
答案 14 :(得分：0)
无论出于何种原因，此处提供的答案均不适用于我的情况。所以，我很有创造力。这是为所有使用linear-gradient()代替box-shadow的人提供的新解决方案。
p {
padding: 1rem;
background-color: #b55;
color: white;
background-image: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0) .5rem, rgba(0,0,0,0), rgba(0,0,0,0.0) calc(100% - .5rem), rgba(0,0,0,0.5));
}<p>Testing</p>
尽管我不想争论这一点，但这并不是您（我们）试图形成的“盒子”，所以我想可以说box-shadow毫无道理首先。
答案 15 :(得分：0)
我试图复制右侧的bootstrap shadow-sm，这是我的代码：
id = models.UUIDField(default=uuid4, primary_key=True, editable=False)