首页  >  文章  >  web前端  >  如何在没有图像的 Outlook 电子邮件中创建圆角?

如何在没有图像的 Outlook 电子邮件中创建圆角?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-10-31 09:56:02146浏览

How to Create Rounded Corners in Outlook Emails Without Images?

在没有图像的 Outlook 中设置圆角样式

使用 CSS 在电子邮件客户端中创建圆角可以非常简单。但是,使用 CSS border-radius 属性的传统方法在 Microsoft Outlook 中不起作用。在设计具有圆角元素的电子邮件时,此限制提出了挑战。

不用担心,有一个解决方案可以让您在 Outlook 中实现圆角,而无需使用图像。关键在于利用 Outlook 的条件注释和 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]-->
<!--[if !mso]> -->
<!--<![endif]-->

此代码在 Outlook 2010 中生成带圆角的按钮。它使用 Outlook 的条件注释专门针对 Outlook 并应用 VML 代码。 VML 代码本身定义了圆角矩形形状及其属性,例如颜色和文本。

请注意,此解决方案已在 Outlook 2010 和主要浏览器中进行测试,但未在 OWA、Outlook.com 或移动浏览器中进行测试。始终建议跨不同平台测试您的代码以确保兼容性。

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn