创建多彩智能阴影

Kirupa Chinnathambi 提供了一个真正有效的 CSS 技巧。要使彩色阴影与元素的 background-image 中的颜色相匹配，您需要在伪元素中 继承 背景，将其置于原始元素后面，然后进行模糊和滤镜处理。

.colorfulShadow {
  position: relative;
}

.colorfulShadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  background-position: center center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
  z-index: -1;
}

对于我来说，负 z-index 始终是一个危险信号，因为这只有在没有中间背景的情况下才有效。但这个技巧仍然成立。始终会有其他方法来分层背景（例如 <span> 或其他任何方法）。

出于某种原因，这使我想起一个我看到的演示（我不记得是谁的功劳！）。表情符号有 text-shadow，这使得它们非常突出。这些阴影也可以被着色，从而产生类似的效果。

直接链接 →