如何在没有图像的 Outlook 电子邮件中实现圆角？-css教程-PHP中文网

如何在没有图像的 Outlook 电子邮件中实现圆角？

Linda Hamilton

发布： 2024-10-29 13:03:29

原创

708 人浏览过

How to Achieve Rounded Corners in Outlook Emails Without Images?

在没有图像的 Outlook 中实现圆角

CSS 属性 border-radius 得到广泛支持，允许在浏览器中创建圆角。然而，当涉及到 Outlook 时，它就显得不足了。这个问题促使开发人员寻求替代方法来在不使用图像的情况下创建圆角。

一种解决方案在于 Outlook 条件注释和 VML（矢量标记语言）的结合。可以将以下代码集成到您的 HTML 中以达到所需的效果：

<code class="html"><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]-->
</div></code>

登录后复制

请注意，此解决方案仅在 Outlook 2010 和主要浏览器中进行了测试。它不支持 OWA、Outlook.com 或移动浏览器。

以上是如何在没有图像的 Outlook 电子邮件中实现圆角？的详细内容。更多信息请关注PHP中文网其他相关文章！