html - 电子邮件模板中的边框半径替代方案

Question

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

Answer 1

带有图像的嵌套表格给人以圆 Angular 的印象是做到这一点的方法。

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

另一种选择是只使用两个 Angular 图像，一个是左上角和左下角，另一个是右上角和右下角。然后文本位于中间。

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