是否有可能以某种方式仅在div的一侧上插入框阴影？请注意，我在这里谈论的是嵌入式盒形阴影，而不是普通的外部盒形阴影。

例如，在下面的JSFiddle中，您会看到插图阴影在所有4面上以不同的程度出现。

如何使其仅显示在顶部？还是最多只有顶部和底部？

JSFiddle： http : //jsfiddle.net/ahmadka/KFrun/

.box {
  -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
  box-shadow: inset 0px 5px 10px 1px #000000;
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

这就是您要寻找的。它为您想要的每个侧面都有阴影的示例。

.top-box
{
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box
{
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box
{
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box
{
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

有关更多示例，请参见代码段：

body {
    background-color:#0074D9;
}
div {
    background-color:#ffffff;
    padding:20px;
    margin-top:10px;
}
.top-box {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
}
.left-box {
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7);
}
.right-box {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
.bottom-box {
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.7);
}
.top-gradient-box {
    background: linear-gradient(to bottom, #999 0, #ffffff 7px, #ffffff 100%);
}
.left-gradient-box {
    background: linear-gradient(to right, #999 0, #ffffff 7px, #ffffff 100%);
}
.right-gradient-box {
    background: linear-gradient(to left, #999 0, #ffffff 7px, #ffffff 100%);
}
.bottom-gradient-box {
    background: linear-gradient(to top, #999 0, #ffffff 7px, #ffffff 100%);
}

<div class="top-box">
        This area has a top shadow using box-shadow
</div>

<div class="left-box">
        This area has a left shadow using box-shadow
</div>

<div class="right-box">
        This area has a right shadow using box-shadow
</div>

<div class="bottom-box">
        This area has a bottom shadow using box-shadow
</div>

<div class="top-gradient-box">
        This area has a top shadow using gradients
</div>
<div class="left-gradient-box">
        This area has a left shadow using gradients
</div>
<div class="right-gradient-box">
        This area has a right shadow using gradients
</div>
<div class="bottom-gradient-box">
        This area has a bottom shadow using gradients
</div>

诀窍是第二个.box-inner内部，其宽度大于原始的.box，并将box-shadow应用于该内部。

然后，在上添加更多填充以.text弥补增加的宽度。

这是逻辑外观：

这是在CSS中的完成方式：

使用最大宽度.inner-box不会导致宽度.box变大，并overflow确保剩余部分被裁剪：

.box {
    max-width: 100% !important;
    overflow: hidden;
}

110％的宽度比父母的宽度（在孩子的上下文中为100％）（.box例如，当父母的宽度固定时，宽度应该相同）。负边距弥补了宽度，并使元素居中（而不是仅隐藏了正确的部分）：

.box-inner {
    width: 110%;
    margin-left:-5%;
    margin-right: -5%;
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

并在X轴上添加一些填充以弥补更宽的范围.inner-box：

.text {
    padding: 20px 40px;
}

这是工作中的小提琴。

如果您检查小提琴，您将看到：

有点晚了，但是可以在这里找到不需要更改填充或添加额外的div的重复答案：仅对box-shadow Inset bottom有问题。它说：“在第四个长度上使用负值来定义传播距离。通常会忽略这一点，但所有主流浏览器都支持该值”

从回答者的小提琴中：

box-shadow: inset 0 -10px 10px -10px #000000;

这有点接近。

.box
{
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000;
    box-shadow: inset -1px 10px 5px -3px #000000;
}

试试吧，也许有用...

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9;
                    -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;  

上面的CSS原因是您的底部有一个框阴影。
你可以在这里多红色

这可能不是您要查找的确切内容，但是您可以通过rgba结合使用来创建非常相似的效果linear-gradient：

  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);

这将创建一个线性渐变，从不透明度为50％的黑色（rgba(0,0,0,.5)）到透明（rgba(0,0,0,0)），从顶部开始透明地变为30％。您可以使用这些值来创建所需的效果。您可以通过添加deg值（linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)）或切换颜色来将其放在另一侧。如果您想要真正复杂的阴影，例如不同侧面的不同角度，甚至可以开始分层linear-gradient。

这是一个片段，可以看到它的实际效果：

.box {
  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

插入框阴影仅在顶部？

#box {
            background: #CCC;
            -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            font: bold 18px/1.2em sans-serif;
            height: auto;
            margin: 15px auto;
            padding: 75px 15px 25px;
            text-align: center;
            width: 80%;
        }