Question

我想在左侧和右侧制作盒子阴影，但是盒子顶部总是有一个阴影，我已多次检查我的代码。

＆＃13;

#box {
  margin: 0 auto;
  margin-top: 0px;
  border: 1px solid #ffffff;
  border-top-color: #e99f2e;
  overflow: hidden;
  box-shadow: 2px 0 20px 2px #7f7e7f, -2px 0 20px 2px #7f7e7f;
}

＆＃13;

<div id="box"></div>

＆＃13;

Answer 1

首先了解syntax的{{1}}，然后在您计划设计时，可以轻松地在任何一侧应用盒子阴影，

box-shadow

＆＃13;

syntax -
box-shadow : offset-x | offset-y | blur-radius | spread-radius | color

＆＃13;

#box {
  margin: 0 auto;
  margin-top: 0px;
  overflow: hidden;
  box-shadow: -10px 0 2px -2px #7f7e7f, 10px 0 2px -2px #7f7e7f;
  height: 150px;
  width: 50%;
  background:#cff;
  margin-top:20px;
}

＆＃13;

Answer 2

实际上有一个黑客。

您可以通过添加＆＃34;空＆＃34;来实现此目的。顶部和底部阴影。

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(30, 53, 125, 0.9), -12px 0 15px -4px rgba(30, 53, 125, 0.9);

Answer 3

如果将spread设置为blur参数的负数，则可以达到此效果。对于左框阴影，将position设置为负blur，将右框阴影设置为position，设置为正blur。我在这个演示中使用了20px：

#box {
  margin: 0 auto;
  margin-top: 40px;
  border: 1px solid #ffffff;
  border-top-color: #e99f2e;
  overflow: hidden;
  width: 150px;
  height: 150px;
  box-shadow: 20px 0px 20px -20px #7f7e7f, -20px 0px 20px -20px #7f7e7f;
}

<div id="box"></div>

查看this CSS Box-shadow generator以进一步探索。

Answer 4

我不认为这和其他答案一样好，但这是使用带阴影的绝对定位伪元素的另一种方法。

＆＃13;

.lr-shadow {
  background:#fff;
  border: 1px solid #fff;
  border-top-color: #e99f2e;
  width:100%;
  max-width:500px;
  height:200px;
  position:relative;
  margin:0 auto;
}
.lr-shadow:before, .lr-shadow:after {
  box-shadow: 0 0 20px 2px #7f7e7f;
  content:" ";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:90%;
  z-index:-1;
}
.lr-shadow:before {
  left:5px;
}
.lr-shadow:after {
  right:5px;
}

＆＃13;

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

＆＃13;

左右框阴影不起作用

4 个答案: