边框半径在 Windows Outlook 上的电子邮件模板中不起作用答案

【问题标题】：Border radius not working in email templates on Windows Outlook边框半径在 Windows Outlook 上的电子邮件模板中不起作用
【发布时间】：2019-07-28 22:01:27
【问题描述】：

我在 Outlook 应用程序的电子邮件模板中遇到 border-radius 问题。我也尝试过使用-WebKit-border-radius 和-ms-border-radius，但它仍然无法在 Outlook 应用中运行。

table {
  width: 32px !important;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -ms-border-radius: 50px;
  -moz-border-radius: 50px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}

&lt;table align="center" height="32" width="32" bgcolor="#293248" cellspacing="0 " cellpadding="0 "&gt;&lt;/table&gt;

【问题讨论】：

请给我们看代码
您好，感谢您的回复。这是我的代码

@ChandanRathore 您可以编辑您的问题，并将代码放入其中。

你能把代码贴出来让我们看清楚来解决你的问题吗？

这是电子邮件客户端中border-radius 支持的列表。您无能为力，因为background-image 也无法正常工作。禁用某些 CSS 属性的全部意义在于采取任何方式让开发人员可以更改电子邮件 HTML 内容，这样用户就不会被欺骗。电子邮件不是网页，它们应该在很大程度上被视为拉皮条的短信（想想短信）。如果您想向用户展示 Web 内容，请向他们展示该页面的链接。顺便说一句，Outlook 会自动创建此链接（和页面）。

标签： css html-table outlook border

【解决方案1】：

Outlook 不支持 CSS3，因为边框半径是 CSS3 属性，它在 Outlook 中不起作用。但它们是您问题的替代解决方案。在 Outlook 2010,2013,2016,2019 中进行测试时，使用下面的代码将在 Outlook 中工作

    <div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroke="f" fillcolor="#d62828">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
        Button Text Here!
    </center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table cellspacing="0" cellpadding="0"> <tr>
    <td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
        <a href="http://www.EXAMPLE.com/" style="color: #ffffff; font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
            Button Text Here!
        </a>
    </td>
</tr> </table>
<!-- <![endif]-->

【讨论】：