Question

我在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;
}

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

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

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

1 个答案: