动态阴影

创建一个类似于box-shadow的阴影，但是基于元素本身的颜色。

• 使用::after伪元素，设置position: absolute，width和height都等于100%，以填充父元素中的可用空间。
• 使用background: inherit来继承父元素的background。
• 使用top轻微偏移伪元素，使用filter: blur()创建阴影，使用opacity使其半透明。
• 在父元素上使用z-index: 1，在伪元素上使用z-index: -1，将其定位在父元素的后面。

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

.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}

.dynamic-shadow::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}