我可以使用
在许多客户端创建圆角style="-moz-border-radius: 15px; border-radius: 15px;"
但是这个CSS不会在Outlook中创建圆角。有什么简单的方法可以在Outlook中创建没有图像的圆角吗?
答案 0 :(得分:43)
此代码使用Outlook条件注释()和VML:
在Outlook 2010中生成带圆角的按钮 <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>
仅在Outlook 2010和主要浏览器中测试,而不是OWA,Outlook.com或任何移动浏览器。值得仔细研究。到期时还款 - http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/
答案 1 :(得分:11)
http://www.campaignmonitor.com/css/显示主要电子邮件客户端支持的所有css。圆形边框甚至没有列入清单。在页面上有一个指向完整PDF的链接,该链接指出Thunderbird 2仅支持边界半径
请注意,您必须在html元素中嵌入样式以支持广泛的电子邮件客户端
答案 2 :(得分:2)
我建议使用 https://buttons.cm/,它会生成如下内容:
<div>
<!--[if mso]>
<v:roundrect
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://TEST.com"
style="height:40px;v-text-anchor:middle;width:200px;"
arcsize="10%"
stroke="f"
fillcolor="#B7D636">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://TEST.com"
style="background-color:#B7D636;
border-radius:4px;
color:#ffffff;
display:inline-block;
font-family:sans-serif;
font-size:13px;
font-weight:bold;
line-height:40px;
text-align:center;
text-decoration:none;
width:200px;
-webkit-text-size-adjust:none;">
TEXT
</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
请注意,最防弹的按钮是作为图像的按钮。这样,整个元素将是可点击的,它将在电子邮件转发中幸存下来,并且所有电子邮件客户端都将支持它而不会出现错误。
答案 3 :(得分:1)
继@VanAlberts回答,这显示了Eli Dickinson的出色工作。这是Eli的git repo https://gist.github.com/elidickinson/9424116
的链接我想我会分享我对Eli代码的改进,它允许基于内部文本的动态宽度按钮。
我发现此https://litmus.com/community/discussions/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottom显示了如何使用mso-fit-shape-to-text:true
这个https://litmus.com/community/discussions/1269-flexible-multi-line-bulletproof-buttons显示了如何避免一些不必要的填充。
这是我的最终结果
<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="mso-wrap-style:none; mso-position-horizontal: center" arcsize="10%" strokecolor="#0368d4" strokeweight="1px" fillcolor="#d62828">
<v:textbox style="mso-fit-shape-to-text:true">
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Button Text Here!</center>
</v:textbox>
</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="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
<span style="color: #ffffff;">
Button Text Here!
</span>
</a>
</td>
</tr> </table>
<![endif]>
</div>
似乎在Outlook 2016中使用word来呈现HTML
答案 4 :(得分:1)
我建议不要使用圆角...经过长时间的测试,使用Litmus,在多个客户端上 - 使用建议的方式圆角:
<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="mso-wrap-style:none; mso-position-horizontal: center" arcsize="10%" strokecolor="#0368d4" strokeweight="1px" fillcolor="#d62828">
<v:textbox style="mso-fit-shape-to-text:true">
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Button Text Here!</center>
</v:textbox>
</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="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
<span style="color: #ffffff;">
Button Text Here!
</span>
</a>
</td>
</tr> </table>
<![endif]>
</div>
转发时会在GMAIL上中断,当将此类代码转发给GMAIL时 - 它将尝试重新创建它,因为它不再包含该条件并将生成以下代码作为示例:
<div style="margin-top:36.0pt">
<p class="MsoNormal" align="center" dir="RTL" style="text-align:center;direction:rtl;unicode-bidi:embed">
<span dir="LTR" style="font-size:11.5pt;font-family:"Arial",sans-serif;color:#2d3b4a">
<u></u>
<span>
<map name="m_3406853463519709989_MicrosoftOfficeMap0">
<area shape="Polygon" coords="38, 2, 13, 12, 3, 37, 13, 62, 38, 72, 228, 72, 253, 62, 263, 37, 253, 12, 228, 2, 38, 2" href="https://local.greeninvoice.co.il/app/account/verify?key=001dEbYWSscdPxI8xt6BcS%2B%2BrA%3D%3D" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&q=https://local.greeninvoice.co.il/app/account/verify?key%3D001dEbYWSscdPxI8xt6BcS%252B%252BrA%253D%253D&source=gmail&ust=1520336994067000&usg=AFQjCNE1iYP97qNrlsCccYFgDyRW3iVPRw">
</map>
<img border="0" width="264" height="74" src="?ui=2&ik=4e1d22bf20&view=fimg&th=161f5fb79e36447b&attid=0.1&disp=emb&attbid=ANGjdJ_3ejUStIrGp0uslTPSXPSph1LGDDnyTH2gHxWhcMpCHN_CjO4ZYsqbvqZJ9gXCxQ7e3KHV2CAn0f-FWPYH7w7lTM9ym54909Upm-h_G9W--o_I431bc9U3icg&sz=w528-h148&ats=1520250594056&rm=161f5fb79e36447b&zw&atsh=1" usemap="#m_3406853463519709989_MicrosoftOfficeMap0" alt="Rounded Rectangle: הפעלת החשבון " class="CToWUd">
</span>
<u></u>
</span>
<span lang="HE" style="font-size:11.5pt;font-family:"Arial",sans-serif;color:#2d3b4a"><u></u><u></u></span>
</p>
</div>
你可以看到这将打破宽度,高度,文本,内容的中心,因为VML是一种专有的Microsoft语言,Outlook在转发时将其转换为地图