使用不带gif的圆角，并在顶部和下方添加背景色，而不是gif

Question

我正在尝试创建电子邮件模板。对于底部和顶部的标题，我希望使用圆角，但我现在设法做到这一点的唯一方法是使用gif files...How，我可以在下面的代码中做到这一点吗？(现在表格边框是上下不完整的，不是关闭的)。我还尝试在中间添加一个gif图像。

<td valign="top" align="center"><img src="file:///C|/Users/the/Desktop/my GIF.gif" width="288" height="146"></td> 

考虑到它是透明的，我希望在图像的边缘周围或后面有背景颜色-也在底部。

对此模板的任何其他编辑都非常受欢迎。

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base target="_blank">
<title>==</title>
</head><body>

<table width="614" border="0" align="center" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;  color:#656565;">
    <tbody><tr>
        <td valign="top" align="center"><img src="file:///C|/Users/the/Desktop/my GIF.gif" width="288" height="146"></td>
    </tr>
    <tr>
        <td valign="top" style="border-left:1px solid #cbd6dc;border-right:1px solid #cbd6dc; padding:0 18px 20px; text-align:left;">
              <table width="576" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
                <tbody><tr>
                    <td valign="top" style="font-size:14px; padding:10px 0 15px;  font-weight:bold">Hello user,<br></td>
                </tr>
                <tr>
                   <td valign="top" style="font-size:19px; padding:10px 0 16px 0; text-align:center;color:#449AC2; ">Congragulations ! </td>
                </tr>
                <tr>
                   <td valign="top" style=" padding:0 0 15px;"> 
                        <table style="width:554px; border:#d3dde2 1px solid; background:#eef3f6;" border="0" align="center" cellpadding="0" cellspacing="0">
                                <tbody><tr>
                                    <td valign="top"><div style="font-size:12px; padding:16px  25px 0 0; line-height:20px;  text-align:left;padding-bottom:20px;"><a href="http://www.website.com/signup?sname=zmail23&amp;ISP=gmail&amp;invitation_key=201307f998225213537deb9e8a3c5930&amp;tt=773&amp;sub=755&amp;referral=bacorichard&amp;tp=8&amp;hr=2013072111&amp;cid=23&amp;source=5" style=" color:#666; text-decoration:none">.    
                                        <p>Congragulations my text here <br>
    <br>                                        
                                  </p></a></div><a href="http://www.website.com/signup?sname=zmail23&amp;ISP=gmail&amp;invitation_key=201307f998225213537deb9e8a3c5930&amp;tt=773&amp;sub=755&amp;referral=bacorichard&amp;tp=8&amp;hr=2013072111&amp;cid=23&amp;source=5" style=" color:#666; text-decoration:none"></a></td>
                                </tr>
                                <tr>
                                    <td valign="bottom" style="padding:0 0 50px 0"><a target="_blank" style=" border:2px solid #fff; padding:5px 6px; background:#f7b225; color:#ffffff; font-size: 16px; font-weight: bold; text-align: center;text-decoration:none; " href="http://www.website.com/signup?sname=zmail23&amp;ISP=gmail&amp;invitation_key=201307f998225213537deb9e8a3c5930&amp;tt=773&amp;sub=755&amp;referral=bacorichard&amp;tp=8&amp;hr=2013072111&amp;cid=23&amp;source=5"> Take me there</a></td>
                                </tr>
                            </tbody></table> 
                   </td>
                </tr>
                <tr>
                    <td valign="top" style="padding-bottom:18px;">
                        <div style="font-family:Arial, Helvetica, sans-serif; font-size:14px; text-align:left; padding:0 ; margin:0;color:#656565">Regards,</div>
                         <div style="font-family:Arial, Helvetica, sans-serif; font-size:14px; text-align:left; padding:0; margin:0;color:#656565">The Team</div>
                     </td>
                </tr>

             </tbody></table>
        </td>
    </tr>
    <tr>
        <td valign="top" style="font-size:11px; font-family:Arial, Helvetica, sans-serif; line-height:16px; padding:10px 0; background:#f6f7fa;border-left:1px solid #cbd6dc;border-right:1px solid #cbd6dc;border-top:1px solid #cbd6dc; padding:15px 18px 0 18px; text-align:center;">



           </td>
    </tr>
    <tr>
        <td valign="top"><img align="top" src="width=&quot;614&quot;" height="23"> </td>
    </tr>
</tbody></table> 
<img src="http://signup.website.com/signup/open_invitation/2013072111/773/755/23/8?isp=gmail&amp;source=5" style="display:none;visibility:hidden;" height="0" width="0/">


</body></html>

Answer 1

可以将边框半径特性添加到表格样式中。

style="font-family:Arial, Helvetica, sans-serif; font-size:12px;border:1px solid #cbd6dc;border-radius: 5px;"

Answer 2

要使用圆角，您可以在大多数元素上使用这样的CSS：

border-radius: 5px;

JSFiddle示例：

该数字越大，圆角就越圆角。

如果你想要内联样式而不是CSS方法，那么像这样添加到样式中：

style="border-radius:5px;border:1px solid #cbd6dc;" 

请务必检查此功能的浏览器兼容性：

现在得到了广泛的支持:)