Question

我想在div的三边有一个盒子阴影（除了顶边）。我怎么能这样做？

Answer 1

这里有一个JS Fiddle，它只使用一个div工作。

#shadowBox {
    background-color: #ddd;
    margin: 0px auto;
    padding: 10px;
    width: 220px;
    box-shadow: 0px 8px 10px gray, 
        -10px 8px 15px gray, 10px 8px 15px gray;
}

您可以在底部，左下角和右下角设置阴影。对于柔和的阴影，它有点棘手，但它是可行的。只需要一点猜测就可以减少中间阴影的模糊半径，这样当它与侧面阴影重叠时它看起来是无缝的并且不会太暗。

Answer 2

如果您正在寻找类似Google材质设计阴影的内容：

.shadow1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.shadow4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

来源：https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10

Answer 3

以下是@Vigrond建议的负Y值的示例

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

Answer 4

如果您拥有纯色背景色，则可以使用background-color和z-index的组合来完成此操作。诀窍是给元素box-shadow及其先前的兄弟定位，然后给前一个兄弟提供背景颜色并将其设置为更高z-index，以便它叠加在上面box-shadow的元素，实际上覆盖了它的顶部阴影。

您可以在此处查看演示：http://codepen.io/thdoan/pen/vNvpKv

如果之前没有兄弟姐妹可以使用，那么您还可以使用伪元素，例如:before或:after：http://codepen.io/thdoan/pen/ojJEMj

Answer 5

对于有硬角的半透明阴影（即没有模糊半径），我使用了这个：

.shadow-no-top {
  position: relative;
  box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2);
}
.shadow-no-top:before {
  content: "";
  position: absolute;
  top: 100%;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background-color: rgba(0,0,0,.2);
}

这使用左右部分的阴影，并添加：after伪内容作为底部阴影。这避免了重叠，使阴影变暗或缺角。

但是，这确实需要元素的背景为实体。

Answer 6

我喜欢@Chris C的答案，但我认为，我们不需要第一行代码。这更短并且具有相同的效果：

box-shadow: -10px 8px 15px lightgray, /*left and bottom*/
            10px 8px 15px lightgray; /*right and bottom*/

#note{
	position: absolute;
	top: 20px; left: 30px;
	width:100px; height: 100px;
	background-color: #eee;
	box-shadow: -10px 8px 15px lightgray,
	10px 8px 15px lightgray;
}

<div id="note"></div>

div三面上的CSS box-shadow？

6 个答案: