没有图像的前景中的圆角答案

【问题标题】：Rounded corners in outlook without images没有图像的前景中的圆角
【发布时间】：2011-11-16 08:33:42
【问题描述】：

我可以在许多客户端中创建圆角

style="-moz-border-radius: 15px; border-radius: 15px;"

但是，此 CSS 不会在 Outlook 中创建圆角。有没有什么简单的方法可以在 Outlook 中创建没有图像的圆角？

【问题讨论】：

简短回答：否
后续问题：简单地将按钮变成图像会不会是个坏主意？通常这是一个不好的做法，但我想知道这是否是一个例外？

标签： html css email

【解决方案1】：

此代码使用 Outlook 条件 cmets () 和 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/

【讨论】：

这是一个很好的解决方案。您需要有创意才能不重复您的内容，但它确实有效！
这是一个有点肮脏的解决方法，但是（据我所知）——微软产品——完全是解决方法。谢谢。
@yAnTar：这很有趣。微软宣布 VML 与 IE9 一样已弃用，但新的 Outlook2017 仍然使用 VML 来绘制矩形，而不是自 2011 年以来应该使用的 SVG：msdn.microsoft.com/en-us/library/bb263897(v=vs.85).aspx
感谢您的回答，它使我找到了解决同一问题的方法。我发布了这个问题的另一个答案，显示了我的最终解决方案。
很遗憾，在 Outlook 1908 版本上似乎无法使用，文本被垂直剪切，无法阅读。

【解决方案2】：

http://www.campaignmonitor.com/css/ 显示主要电子邮件客户端支持的所有 CSS。圆形边框甚至没有进入列表。页面上有一个完整 PDF 的链接，其中指出 Thunderbird 2 中仅支持边框半径

请注意，您必须在 html 元素中嵌入样式以支持广泛的电子邮件客户端

您可以在以下系列文章中找到支持的 HTML 元素和 CSS 样式的完整列表：

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

【讨论】：

你的意思是它与 gmail 一起工作是由你的浏览器呈现的吗？
是的，它在我的浏览器呈现的 gmail 中工作，但在我的浏览器呈现的 Outlook Web Access 中却不行。因此，该指南在我看来仍然是错误的，说 gmail 不支持它。
是的，问题是关于 Outlook。我正在查看 gmail，因为当我知道它部分支持（取决于您的浏览器）时，当我看到指南不支持它时，这让我怀疑该指南是否是一个好的参考。
刚刚发现一篇关于最新 Outlook 2013 的活动活动的文章，litmus.com/blog/… 我认为 Outlook 不会很快支持半径边界。
有趣的是：在这篇文章发布 7 年后，outlook 仍然不支持border-radius 和许多其他基本的css。 :D 另外，我们仍然很乐意使用 table 而不是 div

【解决方案3】：

@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>

似乎在使用 word 呈现 HTML 的 Outlook 2016 中效果很好

【讨论】：

【解决方案4】：

我建议使用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>

请注意，最防弹的按钮是图像按钮。这样整个元素将是可点击的，它将在电子邮件转发中继续存在，并且所有电子邮件客户端都将支持它而不会出现错误。

【讨论】：

【解决方案5】：

我建议不要使用圆角。经过长时间的测试，无论是使用 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:&quot;Arial&quot;,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&amp;q=https://local.greeninvoice.co.il/app/account/verify?key%3D001dEbYWSscdPxI8xt6BcS%252B%252BrA%253D%253D&amp;source=gmail&amp;ust=1520336994067000&amp;usg=AFQjCNE1iYP97qNrlsCccYFgDyRW3iVPRw">
            </map>
            <img border="0" width="264" height="74" src="?ui=2&amp;ik=4e1d22bf20&amp;view=fimg&amp;th=161f5fb79e36447b&amp;attid=0.1&amp;disp=emb&amp;attbid=ANGjdJ_3ejUStIrGp0uslTPSXPSph1LGDDnyTH2gHxWhcMpCHN_CjO4ZYsqbvqZJ9gXCxQ7e3KHV2CAn0f-FWPYH7w7lTM9ym54909Upm-h_G9W--o_I431bc9U3icg&amp;sz=w528-h148&amp;ats=1520250594056&amp;rm=161f5fb79e36447b&amp;zw&amp;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:&quot;Arial&quot;,sans-serif;color:#2d3b4a"><u></u><u></u></span>
   </p>
</div>

如您所见，这会破坏内容的宽度、高度、文本、中心，因为 VML 是一种专有的 Microsoft 语言，Outlook 在转发时会将其转换为地图

【讨论】：