Question

除了底部，我想在每一面都显示方框阴影。

这是我正在使用的CSS。

box-shadow: 0 0 12px 4px #ddd;

如何从中移除底部阴影？

Answer 1

您不能仅在一个轴上更改阴影的尺寸（即，您不能仅仅减少阴影的高度）。一个技巧是将阴影添加到伪元素并减少该元素的高度。

＆＃13;

.shadow {
  margin:20px;
  width:400px;
  height:200px;
  background:red;
  position:relative;
  }
/* Pseudo element for adding shadow */
.shadow:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:16px;
  box-shadow: 0 0 12px 4px #999;
  z-index:-1;
}

＆＃13;

<div class="shadow"></div>

＆＃13;

Answer 2

您可以使用负值将其推离边缘。

＆＃13;

div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  box-shadow: 0px -4px 12px 4px #888888;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div></div>

</body>

</html>

＆＃13;

Answer 3

你可以使用超过1个阴影：

＆＃13;

body {
  box-shadow: 
    -12px -10px 12px -4px /* negative value here decrease the size */#ddd, 
    12px -10px 12px -4px #ddd, 
    inset 0 -3px lime /* demo , show bottom */;
  padding:4em 8em;
  background:gray;
}

/* demo purpose */
html {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
}

＆＃13;

它可以绘制things like this

使用CSS仅隐藏Div的底部阴影

3 个答案: