如何用单个div实现透明背景且完整显示box-shadow效果？

可以仅用单个div实现需求。你当前代码中阴影显示不全的原因是box-shadow基于元素盒模型绘制，当元素背景透明时，若阴影参数设置不符合预期，就会出现显示不完整的情况。以下是两种可行的实现方式：

方式一：调整box-shadow参数实现完整外阴影 #

如果需要阴影围绕透明div的边框完整显示，可移除阴影偏移量，设置合适的扩散半径：

<!DOCTYPE html>
<html>
  <body style="background-color: aqua">
    <div style="background-color: transparent; border: solid 3px #000; width: 50px; height: 50px; box-shadow: 0 0 0 5px rgb(0, 0, 255);">
      <div style="color: #fff; text-align: center; margin-top: 15px;">
        Hello
      </div>
    </div>    
  </body>
</html>

这里box-shadow的最后一个5px是扩散半径，会让阴影围绕边框向外扩展5px，既保持div背景透明，又实现完整的阴影包裹效果。

方式二：使用filter: drop-shadow()实现跟随透明区域的阴影 #

如果需求是阴影跟随元素的非透明轮廓（边框和文字），可以用filter: drop-shadow()替代box-shadow，它会忽略元素的透明部分，只在有内容的区域生成阴影：

<!DOCTYPE html>
<html>
  <body style="background-color: aqua">
    <div style="background-color: transparent; border: solid 3px #000; width: 50px; height: 50px; filter: drop-shadow(5px 5px 0 rgb(0, 0, 255));">
      <div style="color: #fff; text-align: center; margin-top: 15px;">
        Hello
      </div>
    </div>    
  </body>
</html>

这种方式下阴影不会被透明背景遮挡，完全贴合元素的非透明部分轮廓显示。

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