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

Question

我border-radius在 Outlook 应用程序的电子邮件模板中遇到问题。我曾尝试与-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;
}

<table align="center" height="32" width="32" bgcolor="#293248" cellspacing="0 " cellpadding="0 "></table>

Answer 1

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

    <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]-->