Question

我正在设计电子邮件模板，我知道CSS3不适用于大多数电子邮件提供商。我正在尝试弯曲边框（可以通过border-radius完成 - 但大多数电子邮件提供商都不支持它。那么border-radius的替代方案是否适用于所有电子邮件提供商（yahoo，outlook和gmail）。

Answer 1

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

有关在没有CSS的情况下执行此操作的一种方法，请参阅http://jsfiddle.net/williamtdavies/sehp07xe/。这项技术取自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>

Answer 2

根据您的收件人使用的客户端，border-radius是可能的（CSS-Support）。在一些较低人气的客户（例如雅虎 - 见market share）之外，bulletproof button技术将起作用。 Outlook也不支持border-radius，但它可以通过VML复制（大多数VML都是在上面的工具中为你编写的）。

这个工具在CTA按钮之外很有用，只需要进行一些编辑和测试。

电子邮件模板中的border-radius替代方案

2 个答案: