css - 仅从 div 顶部删除框阴影？

Question

我正在尝试向我的 div 添加一个框阴影，但我只希望阴影出现在 div 的左侧、右侧和底部，有谁知道或可以告诉我如何从我的 div 中仅删除顶部阴影？

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

Answer 1

基本的 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);

将是一个具有 5px 垂直偏移的阴影，有效地将阴影向下推，如下所示：

http://jsfiddle.net/TLQs9/

Answer 2

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

div { 
  position: relative;
  background-color: white;
  box-shadow: 0 7px 20px 0 rgba(0,0,0,.4);
}

p { 
  padding: 20px; 
}

div:before {
  content: "";
  height: 7px;
  width: 100%;
  position: absolute;
  top: -7px;
  background: inherit;
  z-index: 2;
}

<div><p>Some container with shadow</p></div>

Answer 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);
}

当我使用它时，除了顶部之外，我的所有侧面都有阴影。您可以更改这些值，它仍然有效。只是不要添加第四个值，你会没事的。

Answer 4

你可以试试这个：

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);
}

• 第一个值是水平位置。
• 第二个值是垂直位置。
• 第三个值在阴影中应用模糊。
• 四值传播。

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

Answer 5

尝试这个 ：

  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);
    }

见 jsfiddle

查看更多 1

查看更多 2

Answer 6

上面的答案都不适合我。因此，作为替代解决方案，我使用了补丁。在带有框阴影的元素/div 内。放置第二个 div，宽度为 100%，其背景颜色与主 div 相同，然后将其放置在 box-shadow 上，如下所示。

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

您可能需要调整高度以修补盒子阴影。但它确实有效。加上这个技巧可以用于任何方面。