Mailchimp 模板中的圆角 - 基于 CSS 或图像

Posted 2023-03-15

【中文标题】Mailchimp 模板中的圆角 - 基于 CSS 或图像

【英文标题】：Rounded corners in Mailchimp templates - CSS or image-based

【发布时间】：2013-02-16 23:16:01

【问题描述】：

我正在为 Mailchimp 创建一个电子邮件模板。我已经下载了一个模板，现在按照要求放置我的内容（我知道使用 Mailchimp 模板语言）。 我的问题是我必须使用圆角并且正在使用基于图像的圆角。

当我在 Mailchimp 可视化编辑器中编辑表格时，基于图像的圆角会损坏并且不再起作用。

我应该使用 CSS 还是基于图像的圆角？请有任何建议。

*编辑：始终使用图像这是我得到的最佳解决方案..

【问题讨论】：

你能提供你的代码吗？

您可以在此处看到 9 个框，其中包含无法正常工作的图像 hsikander.zxq.net/Final/odesk.html

【参考方案1】：

Mailchimp 在其Email Blueprint templates 中使用基于 CSS 的圆角。这是chart from CampaignMonitor 显示一些电子邮件客户端border-radius（以及-moz 和-webkit 前缀）将/不会工作。

基于 CSS 的圆角不适用于每个电子邮件客户端，但会在不支持border-radius 属性的客户端中正常失败。当阅读器未启用图像时，不会显示基于图像的圆角，并且根据您的经验，在 MailChimp 可视化编辑器中维护基于图像的圆角可能很困难，具体取决于您的模板设置方式。

我的建议是基于 CSS 的圆角，使用前缀覆盖最广泛的电子邮件客户端：

border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;

【讨论】：

那么那些不支持基于css的角落的浏览器/客户端呢

不支持基于 CSS 的圆角的浏览器/客户端会看到方角。这肯定是一种权衡，每种方法都有其优点/缺点。如果可以查看您的列表的用户代理，这可能有助于做出决定。如果您的列表包含支持基于 CSS 的圆角的客户端比例高于基于 CSS 的圆角的客户端。

【参考方案2】：

使用图片，100% 支持。 Example here 如何正确操作。

您需要上传由 Mailchimp 或您自己的 URL 托管的角落图像。如果是，Mailchimp 可能正在重新格式化您的代码。不确定它是否是所见即所得，因为我不是 Mailchimp 用户，但如果是这种情况，您始终可以编辑输出代码以放回图像 URL。