如何在 Outlook 上显示边框半径答案

【问题标题】：How to display Border Radius on Outlook如何在 Outlook 上显示边框半径
【发布时间】：2020-04-03 14:27:43
【问题描述】：

我有一个适用于所有 Gmail、Yahoo 等的电子邮件模板。但在 Outlook 中它不起作用。谁能帮助我如何使其在 Outlook 上可见。

<div style="border: 2px solid grey; border-radius: 5px; padding: 20px;">
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Hello</span></span></span></p>
<p>&nbsp;${mail_script:notification_logo}</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="height: 40px;" colspan="5">
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">You Project(${URI_REF}) has been submitted and is being reviewed by&nbsp;<strong>${u_project_manager}</strong>.</span></span></p>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Title</strong></span></span></td>
</tr>
<tr>
<td style="color: black;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${short_description}</span></span></td>
</tr>
<tr>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Submitted by</strong></span></span></td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Approver</strong></span></span></td>
<td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Department</strong></span></span></td>
</tr>
<tr>
<td style="color: black;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${submitter}</span></span></td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${u_project_manager}</span></span></td>
<td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">${department}</span></span></td>
</tr>
</tbody>
</table>
<hr />
<p>&nbsp;</p>
<p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;">Thank you,<br /></span><span style="font-family: 'Montserrat', sans-serif;">IT Service Desk</span></span></p>
<p>&nbsp;</p>
</div>

【问题讨论】：

Outlook 不支持 CSS3 样式。边框半径是 CSS3，因此它在 Outlook 中不可见，但在 Gmail 中
这能回答你的问题吗？ Rounded corners in outlook without images
@Abdul Azeez 请输入我的代码，它也适用于您的 Outlook。

标签： html css email outlook html-email

【解决方案1】：

只有 IOS 设备上的 Outlook 支持边框半径。
Windows 版本的 Outlook 不支持边框半径，因为它使用 Microsoft Word 作为其处理器。

查看活动监视器： https://www.campaignmonitor.com/css/box-model/border-bottom/

【讨论】：

【解决方案2】：

虽然您可以尝试以下代码，但如果它有助于解决您的问题。

<body>

  <table cellspacing="0" cellpadding="0">
    <tr>
      <td width="300" height="40" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;background-color:#000;text-align:center;">
        <a href="http://www.google.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">
               Test
            </a>
      </td>
    </tr>
  </table>

  <br/>
  <br/>
  <br/>

  <div style="border: 2px solid grey;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 20px;">
    <p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Hello</span></span>
      </span>
    </p>
    <p>Lorem ipsum </p>
    <table style="width: 100%;">
      <tbody>
        <tr>
          <td style="height: 40px;" colspan="5">
            <p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">You Project( Lorem ipsum  ) has been submitted and is being reviewed by&nbsp;<strong>Lorem ipsum </strong>.</span></span>
            </p>
            <p>&nbsp;</p>
          </td>
        </tr>
        <tr>
          <td style="background-color: #e6e7e8; color: #396b53;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Title</strong></span></span>
          </td>
        </tr>
        <tr>
          <td style="color: black;" colspan="5"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Lorem ipsum </span></span>
          </td>
        </tr>
        <tr>
          <td style="background-color: #e6e7e8; color: #396b53;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Submitted by</strong></span></span>
          </td>
          <td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Approver</strong></span></span>
          </td>
          <td style="background-color: #e6e7e8; color: #396b53;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;"><strong>Department</strong></span></span>
          </td>
        </tr>
        <tr>
          <td style="color: black;" colspan="3"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Lorem ipsum </span></span>
          </td>
          <td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Lorem ipsum </span></span>
          </td>
          <td style="color: black;" colspan="1"><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 300;">Lorem ipsum </span></span>
          </td>
        </tr>
      </tbody>
    </table>
    <hr />
    <p>&nbsp;</p>
    <p><span style="font-family: 'museo-sans', sans-serif;"><span style="font-weigth: 500;">Thank you,<br /></span><span style="font-family: 'Montserrat', sans-serif;">IT Service Desk</span></span>
    </p>
    <p>&nbsp;</p>
  </div>

</body>

【讨论】：

您好先生，您能帮我将上面的代码添加到我的代码中吗？我的前端很差，如果可能的话请帮我把上面的代码添加到你的代码中？所以我可以测试？
您的示例中的某些属性已过时。 align 和 bgcolor。也不再需要供应商前缀。不要使用这个例子。
@AbdulAzeez 请在您遇到问题的地方提供有效的 HTML 标记。您的上述代码似乎是一些模板，请仅粘贴 HTML
@Rob 同意 you.incorporated 的建议。谢谢！
上述两种样式 (-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;) 在 Outlook 中都不起作用。查看@awis 的评论，他指出了一种在 Outlook 中制作圆角边缘的方法