Question

我需要在侧面显示一个盒子阴影。这不是div底部的阴影。我的boxshadow css在侧面和底部给出了阴影，如下所示：

ul {
  &:hover {
    li {
      opacity: 0.4;
    }
  }
  li {
    transition: opacity .8s;
    &:hover {
      opacity: 1;
    }
  }
}

在stackoverflow上阅读其他帖子我试过了：

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

但是没有用。任何有关如何实现的帮助都会受到高度赞赏。谢谢！

Answer 1

您可以使用伪元素覆盖顶部/底部阴影。

＆＃13;

div {
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  width: 100px; 
  height: 100px;
  margin: auto;
  position: relative;
}
div:before, div:after {
  position: absolute;
  left: 0; right: 0;
  content: '';
  background: white;
}
div:before {
  height: 2px; /* 3px - 1px */
  top: 0;
  transform: translateY(-100%);
}
div:after {
  bottom: 0;
  transform: translateY(100%);
  height: 4px; /* 3px + 1px */
}

＆＃13;

<div></div>

＆＃13;

Answer 2

将spread-radius参数的负值用于多个框阴影，一个用于左侧，另一个用于右侧。如果展开半径值的绝对值等于或大于blur-radius。

，则此方法有效

div {
  margin: 30px;
  height: 100px;
  width: 75px;
  box-shadow: -5px 0 3px -4px black, 5px 0 3px -4px black;
}

<div></div>

Boxshadow仅限于侧面

2 个答案: