前景中没有图像的圆角

Question

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

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

但是,此CSS不会在Outlook中创建圆角.有没有简单的方法在Outlook中创建没有图像的圆角？

Answer 1

此代码使用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/

Answer 2

http://www.campaignmonitor.com/css/显示主要电子邮件客户端支持的所有css.圆形边框甚至没有列入清单.在页面上有一个指向完整PDF的链接,该链接指出Thunderbird 2仅支持边界半径

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

Answer 3

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

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

Answer 4

进一步@VanAlberts 回答显示了Eli Dickinson 的伟大作品。这是 Eli 的 git 仓库的链接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 中似乎效果很好