如何在邮件中添加盒阴影效果

Question

我可以帮你翻译成中文。以下是您需要翻译的内容：

我想通过HTML代码创建自己的邮件。

现在我已经编写了如下代码：

<table style="margin:auto;box-shadow:0 0 11px #090909">
</table>

这些属性正常工作，但在Gmail和Yahoo中，boxshadow的效果不起作用，但在其他公司域中它能正常工作。

- Uday A. Navapara

---

在 这个指南 中提到，box-shadow 在 Gmail 和 Yahoo Mail 上不受支持。 - brrystrw

那么在电子邮件中还有其他方法可以添加阴影吗？ - Uday A. Navapara

Answer 1

这是在CSS3出现之前我们的做法：

  <div class="shadow" style="width:150px">
    <div class="overlay">
      <p>BoxShadows 90s style.</p>
    </div>
  </div>

以及CSS：

.overlay {
  background-color: #FFFFFF;
  border: 1px solid #000000;
  color: #000000;
  padding: 0.5em;
}
.shadow {
  background-color: #CCCCCC;
}
.shadow .overlay {
  bottom: 4px;
  position: relative;
  right: 4px;
}

通过在内容下面放置一个略微偏移的灰色div。

查看这里，以获得不那么花哨的结果。示例

另一种方法是将您的表格包装在一个表格中，其中外部单元格具有2个拉伸的半透明png和1个角png作为背景。效果更好，但由于大多数电子邮件客户端默认情况下不显示图像，因此我会坚持使用旧式浏览器安全建议与覆盖层div。

- mainguy

---

这是一个很好的解决方案，应该在所有客户端中都能工作。 - Phill Healey

有没有办法让这个阴影变得模糊？ - Soul Eater

在 Gmail 和其他客户端中不支持 position 属性。 - Caleb Taylor

Answer 2

它只在少数邮件客户端中受支持。如果您想要100%的支持，最好使用图片。

- Shanthi

Answer 3

<table style="margin:auto;box-shadow:0 0 11px #090909;">

你忘记加分号了，请检查一下是否是这个问题。

- Prashant Sharma

---

末尾不需要使用分号。 - Aravind Reddy

不需要加分号; - OP的语法是正确的。 - Mike Harrison

嘿，伙计，你知道你随时可以删除这个答案，并恢复失去的声誉。不要感到羞愧，我们所有人都曾发布过错误的答案，毕竟我们是人类程序员。 - Jose Manuel Abarca Rodríguez