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。

＆＃13;

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

＆＃13;

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

＆＃13;

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

See in jsfiddle

See More 1

See More 2

Answer 6

上述答案都不适合我。因此，作为替代解决方案，我使用了补丁。元素/ div内部带有框阴影。放置第二个div，宽度为100％，背景颜色与主div相同，然后将其放置在盒子阴影上，就像这样。

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

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

从div顶部删除框阴影？

6 个答案: