边框半径在 Outlook 桌面上不起作用

Question

使按钮变圆的边框半径在 Outlook 桌面版中不起作用。

这是我在 html 中尝试的代码

<table border="0" cellspacing="0" cellpadding="10" valign="top">
                          <tr>
                            <td class="outlook-btn" align="center" style="font-size:18px; background-color:#FFFFFF;">
                              <font face="Arial, sans-serif">
                                <a  href="#" style="padding: 10px 25px; border-radius:5px; color:#df0024; text-decoration:none;">GET STARTED</a>
                              </font>
                            </td>
                          </tr>
                       </table>

展望有条件评论

.outlook-btn{
padding: 10px 25px !important;
border-radius: 20px !important;
border: 1px solid #000000 !important;
}

Answer 1

自 2007 年起，Windows 上的 Outlook 使用 Word 作为渲染引擎。该引擎自 2007 年以来就没有真正更新过，因此它不支持此后出现的任何 HTML 或 CSS。所以它不支持

border-radius

。 （您可以查看 CanIEmail.com，了解有关 Outlook 和其他电子邮件客户端中 CSS 支持的详细信息：https://www.caniemail.com/features/css-border-radius/）。

在 Windows 上的 Outlook 中获得圆角的常见解决方案是使用 VML。它是一种类似于 SVG 的图像格式。 Campaign Monitor 有一个按钮生成器，该按钮生成器使用 VML for Outlook on Windows：https://buttons.cm/（但请注意，VML 可能会对可访问性产生负面影响，例如使 VML 中的链接对键盘用户不可用。）