如何在 Outlook 电子邮件中创建圆角：CSS 和 VML 解决方案？

Outlook 中的圆角：CSS 和 VML 解决方案

创建具有视觉吸引力的电子邮件可能具有挑战性，尤其是在设计诸如按钮。虽然 CSS 允许您在许多电子邮件客户端中实现圆角，但它在 Outlook 中可能无法按预期工作。

问题：

用于创建圆角的标准 CSS 代码，例如 -moz-border-radius 和 border-radius，在 Outlook 中无法正确呈现。

解决方案：

一种在 Outlook 中创建圆角的有效方法，无需使用使用图像是将 Outlook 条件注释与 VML（矢量标记语言）结合起来。 VML 是一种用于在网页中绘制形状的较旧技术，但 Outlook 仍然支持它。

代码：

以下是创建按钮的示例代码Outlook 2010 中的圆角：

<code class="html"><div>
    <!-- Outlook conditional comments for VML -->
    <!--[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]-->
    <!-- Non-Outlook fallback -->
    <!--[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 中，VML 代码将创建圆角，而非 Outlook 浏览器将使用 CSS 显示基于后备表格的圆角设计。

注意：此解决方案仅在 Outlook 2010 和主要浏览器中进行了测试，可能不适用于 Outlook Web App (OWA)、Outlook.com 或移动浏览器。

以上是如何在 Outlook 电子邮件中创建圆角：CSS 和 VML 解决方案？的详细内容。更多信息请关注PHP中文网其他相关文章！