css - 如何仅在左侧和右侧获得框阴影

Question

<分区>

Answer 1

请记住，您可以对 spread 使用负值，对 box-shadow 使用多个值。

.shadow {
  width: 30%;
  height: 40px;
  margin: 2rem;
  box-shadow:
  -5px 0px 5px -6px rgba(0,0,0,1),
  5px 0px 5px -6px rgba(0,0,0,1);
}

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

另一种解决方案可能是使用::before 和::after 以及 filter: blur。这里的好处是你可以变换:旋转阴影，让它看起来像父元素在轻微倾斜。

.shadow {
  position: relative;
  margin: 2rem;
  width: 30%;
  height: 30px;
  background-color: white;
}

.shadow::before,
.shadow::after {
  z-index: -1;
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  background-color: #000;
  width: 2px;
  filter: blur(2px);
}

.shadow::after {
  right: 0px;
}

.tilting.shadow::before,
.tilting.shadow::after
{
  height: 4px;
  top: initial;
  bottom: 0px;
  width: initial;
}

.tilting.shadow::before {
  left: 0px;
  right: 10px;
  transform: rotate(-3deg);
}

.tilting.shadow::after {
  left: 10px;
  right: 0px;
  transform: rotate(3deg);
}

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

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