CSS自定义阴影

Question

如何根据下面的图像制作阴影？我不知道该怎么做。

Answer 1

您可以通过以下方式设置Pesedo元素::before和::after的样式：

div {
  width: 300px;
  height: 400px;
  background: #FFF;
  margin: 40px auto;
  position: relative;
}

div::before,
div::after {
  z-index: -1;
  position: absolute;
  content: "";
  width: 50%;
  height: 50%;
  right: 10px;
  top: 10px;
  max-width: 300px;
  background: #777;
  box-shadow: 15px 0px 10px #777;
  transform: rotate(3deg);
}

div::after {
  transform: rotate(-3deg);
  top: calc(50% - 10px);
}

<div></div>

有关更多阴影样式，请参见pen。