Html 没有图像的 Outlook 中的圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7405493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rounded corners in outlook without images
提问by Danny
I can create rounded corners in many clients with
我可以在许多客户中创建圆角
style="-moz-border-radius: 15px; border-radius: 15px;"
However this CSS does not create rounded corners in Outlook. Is there any easy way to create rounded corners without images in Outlook?
但是，此 CSS 不会在 Outlook 中创建圆角。有没有什么简单的方法可以在 Outlook 中创建没有图像的圆角？
采纳答案by Benjamin Udink ten Cate
http://www.campaignmonitor.com/css/displays all css supported in major email clients. Rounded borders didn't even make it to the list. On the page there is a link to a full PDF, which notes that border radius is ONLYsupported in Thunderbird 2
http://www.campaignmonitor.com/css/显示主要电子邮件客户端支持的所有 css。圆形边框甚至没有出现在列表中。在页面上有一个完整的 PDF 链接，其中指出只有Thunderbird 2 支持边框半径
please note that you have to embed the styles in the html elements to support a broad range of email clients
请注意，您必须在 html 元素中嵌入样式以支持广泛的电子邮件客户端
You can find the full list of supported HTML elements and CSS styles in the following series of articles:
您可以在以下系列文章中找到支持的 HTML 元素和 CSS 样式的完整列表：
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Outlook 2007 中的 Word 2007 HTML 和 CSS 呈现功能（第 1 部分，共 2 部分）
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
回答by VanAlbert
This code produces buttons with rounded corners in Outlook 2010 using the Outlook conditional comments () and VML:
此代码使用 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>
Tested in Outlook 2010 and major browsers only, not OWA, Outlook.com or any mobile browsers. It's worth a closer look. Credit where due -- http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/
仅在 Outlook 2010 和主要浏览器中测试，未在 OWA、Outlook.com 或任何移动浏览器中测试。值得仔细看看。信用到期 - http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/
回答by Rel
Further to @VanAlberts answer which shows Eli Dickinson's great work. Here is a link to Eli's git repo https://gist.github.com/elidickinson/9424116
进一步@VanAlberts 回答显示了Eli Dickinson 的伟大作品。这是 Eli 的 git 仓库的链接https://gist.github.com/elidickinson/9424116
I thought I would share my improvement to Eli's code which allows for dynamic width button based on the text inside.
我想我会分享我对 Eli 代码的改进，该代码允许基于内部文本的动态宽度按钮。
I found this https://litmus.com/community/discussions/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottomwhich shows how to use mso-fit-shape-to-text:true
我发现这个https://litmus.com/community/discussions/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottom显示了如何使用mso-fit-shape-to-text:true
And this https://litmus.com/community/discussions/1269-flexible-multi-line-bulletproof-buttonswhich shows how to avoid some unwanted padding.
这个https://litmus.com/community/discussions/1269-flexible-multi-line-bulletproof-buttons展示了如何避免一些不需要的填充。
This is my end result
这是我的最终结果
<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>
Seems to work great in outlook 2016 which uses word to render HTML
在使用 word 呈现 HTML 的 Outlook 2016 中似乎效果很好
回答by dinbrca
I suggest to just not use rounded corners.. after long times of testing, both with Litmus, on multiple clients - rounded corners using the ways suggested such as:
我建议不要使用圆角..经过长时间的测试，包括 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>
Will break on GMAIL when forwarding, when forwarding this type of code to GMAIL - it will try to re-create it because it won't contain the condition any longer and will generate the following code as example:
转发时会在 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>
This as you can see will break the width, height, text, center of stuff and happens because VML is a proprietary Microsoft language and Outlook converts it to a map when forwarding
正如您所看到的，这会破坏宽度、高度、文本、内容的中心，这是因为 VML 是一种专有的 Microsoft 语言，Outlook 在转发时将其转换为地图
