如何仅显示CSS投影效果（drop shadow）而隐藏方块本身？

嘿，我懂你要的效果——让方块彻底隐身，只留下它的投影对吧？你尝试用opacity的思路其实逻辑没问题，但可惜opacity会把元素和它的所有视觉效果（包括投影）一起变透明，所以达不到预期。给你几个简单靠谱的解决办法：

方法1：直接把元素背景设为透明（最推荐） #

这是最简单直接的方式，既然你要隐藏方块本身，那只要把它的background-color改成透明，同时去掉影响全局的opacity属性就行——投影是基于元素形状生成的，哪怕元素背景透明，投影依然会保留：

.light-blur-effect {
  height: 100px;
  width: 100px;
  background-color: transparent; /* 方块背景设为完全透明 */
  filter: drop-shadow(20px 20px 20px #BEEEF5);
}

这样修改后，元素本身没有任何可见的背景，只有投影会被渲染出来，完美符合你的需求。

方法2：用伪元素承载投影（适合需要保留元素占位的场景） #

如果你的元素在布局中需要占据特定位置，但又不想显示它本身，可以用伪元素来单独生成投影：

.light-blur-effect {
  height: 100px;
  width: 100px;
  position: relative;
  background-color: transparent; /* 原元素本身透明 */
}

.light-blur-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #BEEEF5; /* 伪元素带背景，用来生成投影 */
  filter: drop-shadow(20px 20px 20px #BEEEF5);
  opacity: 0; /* 伪元素本身透明，只留下投影 */
}

这个方法的好处是原元素依然会在文档流中占据空间，不会破坏现有布局，同时只显示投影效果。

方法3：将元素移出可视区域（适合不需要元素占位的场景） #

如果你的元素不需要在布局中占位置，可以把它移到屏幕外，但投影依然会显示在原来的位置：

.light-blur-effect {
  height: 100px;
  width: 100px;
  background-color: #BEEEF5;
  filter: drop-shadow(20px 20px 20px #BEEEF5);
  position: absolute;
  left: -9999px; /* 把元素移到可视区域外 */
}

不过这个方法会让元素脱离文档流，可能影响布局，所以优先推荐前两种方法。

内容的提问来源于stack exchange，提问作者Homo