基本Box-shadow值为：

box-shadow: [horizontal-offset] [vertical-offset] [blur](optional) [spread](optional) [color]

例如：

box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);

只是一个没有偏移的阴影

box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);

将是具有5 px垂直偏移的阴影，有效地将阴影向下推，如下所示：
http://jsfiddle.net/TLQs9/

您可以使用:before来使用绝对定位和负边距来覆盖框阴影，而不是向标记中添加额外的div。
第一个

您可以尝试以下操作：

div {
  -moz-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
  -khtml-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
  box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
}

• 第一个值是水平位置。
• 第二个值是垂直位置。
• 第三个值会在阴影中套用模糊。
• 四值价差。

因此，请尝试您的垂直和水平位置匹配模糊和扩散

试试看：

div{
box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
}

当我使用这个的时候，我在除了顶部之外的所有地方都有一个阴影。你可以改变这个值，它仍然有效。只要不增加第四个值，你就可以了。

试试这个：

div
    {
      box-shadow: 0px 9px 29px rgb(102, 102, 102);
      -webkit-box-shadow: 0px 9px 29px rgb(102, 102, 102);
      -moz-box-shadow:0px 9px 29px rgb(102, 102, 102);
    }

See in jsfiddle
See More 1
See More 2

上面的答案对我都不起作用。所以作为一个替代的解决方案，我使用了一个补丁。在元素/div内部的框阴影。放置第二个div，宽度100%，其背景颜色与主div相同，然后放置它覆盖在框阴影上，就像这样。

background-color: your background color?
width:100%;
position:absolute;
height 15px;
left 0; 
top -10px;

你可能需要调整高度来修补盒子的阴影。但是它确实有效。而且这个技巧可以用于任何一方。

截至2022年11月，有一个很好的、干净的方法可以使用CSS clip-path属性来实现这一点。

div {
  box-shadow: 0 0 10px black;
  clip-path: inset(0px -10px -10px -10px);
}

Inset将从上、右、下、左边缘裁剪掉元素。对于示例中的阴影，我们将裁剪超出顶部边界的所有内容，隐藏顶部的阴影，并为所有其他边的阴影留出10px的空间。
在我看来，这是解决这个问题的干净、理想的解决方案。浏览器支持是好的，但如果你仍然想在IE11中获得支持，你会想探索polygon选项，而不是inset。