如何在邮件中实现span/div悬浮覆盖在边框上的效果

实现方案 #

可以通过table的分列/合并单元格方案实现，完全兼容gmail等主流邮件客户端，不需要用到定位或负margin。
实现逻辑：将带标签的卡片容器拆分为2行3列的table结构，利用单元格的边框拼接出「标签覆盖边框」的视觉效果：

• 第一行左右两个单元格仅渲染上半部分边框，高度设置为标签高度的1/2
• 第一行中间单元格垂直底部对齐，直接放椭圆形标签元素
• 第二行单元格跨3列，渲染下半部分边框和主体内容

代码示例 #

<!-- 外层容器table -->
<table width="500" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
  <tr>
    <!-- 左上边框单元格 -->
    <td height="16" style="border-top: 1px solid #ccc; border-left: 1px solid #ccc;"></td>
    <!-- 放标签的中间单元格 -->
    <td align="center" valign="bottom" style="padding: 0 12px;">
      <span style="display: inline-block; padding: 4px 12px; border-radius: 20px; background: #f5f5f5; color: #333; font-size: 14px; line-height: 24px;">
        示例标签
      </span>
    </td>
    <!-- 右上边框单元格 -->
    <td height="16" style="border-top: 1px solid #ccc; border-right: 1px solid #ccc;"></td>
  </tr>
  <tr>
    <!-- 主体内容单元格 跨3列 -->
    <td colspan="3" style="border: 1px solid #ccc; border-top: 0; padding: 24px;">
      卡片主体内容在这里输入
    </td>
  </tr>
</table>

适配注意事项 #

• 可根据你的标签实际高度调整第一行单元格的height数值，保证标签刚好覆盖住上下边框的接缝处
• 所有样式必须写inline，避免gmail等客户端过滤内部/外部样式
• 如果需要调整标签左右位置，只需要修改中间单元格的左右padding值即可

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