使用Tailwind CSS构建底部带模糊文本区域的卡片问题求助

你看到的模糊区域边缘的灰白“边框”，是backdrop-blur的采样特性导致的——模糊效果需要从元素周围区域取色，但父容器的overflow-hidden把超出圆角的部分裁掉了，模糊采样不到完整的背景色，就会露出浅色边缘。

直接修改代码就能解决，调整后的代码如下：

<div class="w-80 h-52 relative mx-0 my-auto rounded-2xl overflow-hidden">
  <!-- 背景图层 -->
  <div class="w-full h-full bg-cover bg-center" :style="{ backgroundImage: `linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)), url(${url})` }"></div>
  <!-- 底部模糊标签层 -->
  <div class="absolute inset-x-0 bottom-0 h-16 z-10 flex items-center justify-center rounded-b-2xl backdrop-blur-sm bg-black/10">
    <span class="text-2xl text-white font-nunito">{{ label }}</span>
  </div>
</div>

关键修改点：

• 用inset-x-0替代w-full，让模糊层完全贴合父容器左右边缘，避免细微间隙
• 给模糊层加上rounded-b-2xl，和卡片底部圆角统一，确保视觉一致性
• 添加bg-black/10半透明黑色背景，填补模糊采样不足的空白，同时增强层次感
• 将背景层和模糊标签层放在同一父级下，避免嵌套导致的采样范围受限

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