电子邮件模板中的边框半径替代答案

【问题标题】：border-radius alternative in email Templates电子邮件模板中的边框半径替代
【发布时间】：2015-03-13 13:16:50
【问题描述】：

我正在设计电子邮件模板，我知道 CSS3 不适用于大多数电子邮件提供商。我正在尝试弯曲边界（可以由border-radius 完成 - 但大多数电子邮件提供商不支持它）。那么是否有任何替代 border-radius 的方法适用于所有电子邮件提供商（雅虎、Outlook 和 gmail）。

【问题讨论】：

Border-radius 不支持电子邮件模板。在进行设计时尽量遵循电子邮件模板设计标准。
您可以放置该角的图像并将它们对齐到正确的角。
@KarlenKishmiryan 我不能这样做，因为我必须输入一些（动态）文本！
你需要做这个老派。创建 3x3 表格，将文本放在中间，边框图像放在周围的单元格中。
您可以，例如，左对齐左角，右对齐右角，并在它们之间放置一个动态 div。这就是人们在border-radius 属性之前制作radiused 边框（实际上是任何custom 边框）的方式。

标签： html css email email-templates

【解决方案1】：

带有图像的嵌套表格可以给人圆角的印象。

请参阅http://jsfiddle.net/williamtdavies/sehp07xe/，了解一种不使用 CSS 的方法。此技术取自 O2 发送的电子邮件，并使用 4 个角图像为您提供圆角。

另一种选择是只使用两个角落图像，一个会显示左上角和左下角，另一个会显示右上角和右下角。文本然后进入中间。

<table cellspacing="0" cellpadding="0" border="0" class="button" bgcolor="#fff">
    <tbody>
        <tr>
            <td width="10" valign="top" height="2" align="left"><img width="2" height="2" style="display:block;" alt="" src="https://dub125.mail.live.com/Handlers/ImageProxy.mvc?bicild=&amp;canary=nX4c2hkw9FozzZj%2bs3llZ3Tijses1c0WyDInrqVhOp0%3d0&amp;url=http%3a%2f%2fimg.o2-email.co.uk%2fassets%2fftp%2forbis-04443%2fbtnTopLeft.gif"/></td>
            <td></td>
            <td width="10" valign="top" align="right"><img width="2" height="2" style="display:block;" alt="" src="https://dub125.mail.live.com/Handlers/ImageProxy.mvc?bicild=&amp;canary=nX4c2hkw9FozzZj%2bs3llZ3Tijses1c0WyDInrqVhOp0%3d0&amp;url=http%3a%2f%2fimg.o2-email.co.uk%2fassets%2fftp%2forbis-04443%2fbtnTopRight.gif"/></td>
        </tr>
        <tr>
            <td height="26" class="ecxbtn-height"></td>
            <td>
                <table cellspacing="0" cellpadding="0" border="0" class="button">
                    <tbody>
                        <tr>
                            <td><font style="font:13px Verdana, Helvetica, sans-serif;color:#2587bd;" class="ecxbtn-copy"><a id="ecxasset_link_9164@#@http://www.dogorcat.co.uk?cm_mmc=Email-_-4443_DogCat_Xmas_email-_-CTA_button-_-Find_the_perfect_presents" href="http://t.o2-email.co.uk/JP5-1UNP-3SQVU-11L8R-1/c.aspx" target="_blank" style="text-decoration:none;color:#2587bd;display:block;width:100%;">Find the perfect presents </a></font></td>
                            <td width="18" align="right">
                                <table border="0" cellspacing="0" cellpadding="0">
                                    <tbody>
                                        <tr>
                                            <td height="2"></td>
                                        </tr>
                                        <tr>
                                            <td><a href="http://t.o2-email.co.uk/JP5-1UNP-3SQVU-11L8S-1/c.aspx" target="_blank"><img src="https://dub125.mail.live.com/Handlers/ImageProxy.mvc?bicild=&amp;canary=nX4c2hkw9FozzZj%2bs3llZ3Tijses1c0WyDInrqVhOp0%3d0&amp;url=http%3a%2f%2fimg.o2-email.co.uk%2fassets%2fftp%2forbis-04443%2fbtnArrowBlueOnWhite.gif" alt="" width="7" height="10" border="0" style="display:block;"/></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td></td>
        </tr>
        <tr>
            <td valign="bottom" align="left"><img width="2" height="2" style="display:block;" alt="" src="https://dub125.mail.live.com/Handlers/ImageProxy.mvc?bicild=&amp;canary=nX4c2hkw9FozzZj%2bs3llZ3Tijses1c0WyDInrqVhOp0%3d0&amp;url=http%3a%2f%2fimg.o2-email.co.uk%2fassets%2fftp%2forbis-04443%2fbtnBottomLeft.gif"/></td>
            <td></td>
            <td valign="bottom" align="right"><img width="2" height="2" style="display:block;" alt="" src="https://dub125.mail.live.com/Handlers/ImageProxy.mvc?bicild=&amp;canary=nX4c2hkw9FozzZj%2bs3llZ3Tijses1c0WyDInrqVhOp0%3d0&amp;url=http%3a%2f%2fimg.o2-email.co.uk%2fassets%2fftp%2forbis-04443%2fbtnBottomRight.gif"/></td>
        </tr>
    </tbody>
</table>

【讨论】：

【解决方案2】：

根据收件人使用的客户端，可以使用边界半径 (CSS-Support)。除了一些知名度较低的客户端（例如 Yahoo - 请参阅此处以获取 market share）之外，bulletproof button 技术将起作用。 Outlook也不支持border-radius，但可以通过VML复制（大部分VML都是在上面的工具中为你编写的）。

这个工具在 CTA 按钮之外也很有帮助，它只需要一些编辑和测试。

【讨论】：