html - 你如何给阴影一个图案？

Question

您如何为框阴影赋予图案，例如图像中的点图案？

编辑：截图来自https://fdisk.space。浏览代码，这是我到目前为止所得到的。IIRC，bg_shadow 是一个点的图像，它被相乘以获得模式。将其应用于“square”类的元素并没有给出模式，代码中的错误是什么？

此外，是否有某种方法可以在不使用数据 URL 的情况下实现相同的效果？

:root {
  --bg_shadow: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAD0lEQVQImWNgYGD4z4AMAA4EAQAvGW0PAAAAAElFTkSuQmCC);
}

.square {
  height: 200px;
  width: 200px;
  border: 2px solid black;
}

.shadow {
  position: relative;
}

.shadow:after {
  background: var(--bg_shadow);
  background-position: right bottom;
  background-repeat: repeat;
  height: 100%;
  width: 100%;
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  z-index: -1;
}

.shadowPlus4:after {
  height: calc(100% + 3.1px);
  width: calc(100% + 3.1px);
}

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

标签： htmlcss