时间戳

首页 > 解决方案 > 边框半径在 Windows Outlook 上的电子邮件模板中不起作用

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

问题描述

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

标签： csshtml-tableoutlookborder

解决方案

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

推荐阅读