使用 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。

使用 CSS 的自定义阴影

Custom shadow with CSS

css

box-shadow