OL Office 365 (Win 10) 邮件圈和边框问题答案

【问题标题】：OL Office 365 (Win 10) email circle and border issueOL Office 365 (Win 10) 邮件圈和边框问题
【发布时间】：2021-09-17 06:29:41
【问题描述】：

<!--[if mso]>
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/"  style="text-align: center;font-size: 14px;height: 143px;width: 143px;" arcsize="50%" strokecolor="#fbe2a6" strokesize="4px" stroke="f" fillcolor="#f7c54d">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:sans-serif;font-size:13px;">
            <div class="yellow-circle">
                <div class="number" style="color: #fff;font-weight: 700;font-size: 24px;line-height: 1;padding-bottom: 2px;">#1</div>
                <div class="round-title" style="font-size: 11px;font-weight: 700;color: #1f3b85;margin-bottom: 5px;">Top Performers<br>on Social Mobility</div>
                <div class="round-title-small" style="color: #1f3b85;font-size: 11px;">2021 US News<br> World Report</div>
            </div>
        </center>
    </v:roundrect>
<![endif]-->

<!--[if !mso]> <!-->
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody>
            <tr>
                <td style="text-align: center;background: #f7c54d;font-size: 14px;height: 143px;padding: 0 6px 5px;border-radius: 50%;border: 4px solid #fbe2a6;">
                    <div class="yellow-circle">
                        <div class="number" style="color: #fff;font-weight: 700;font-size: 26px;line-height: 1;padding-bottom: 2px;">#1</div>
                        <div class="round-title" style="font-size: 13px;font-weight: 700;color: #1f3b85;margin-bottom: 5px;">Top Performers<br>on Social Mobility</div>
                        <div class="round-title-small" style="color: #1f3b85;font-size: 13px;">2021 US News<br> World Report</div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
<!-- <![endif]-->

设计现在看起来像这样

如何在设计中添加笔触

【问题讨论】：

标签： html-email

【解决方案1】：

用strokeweight="4px"代替strokesize="4px"。

但是，对于呕吐语言 (VML)，您通常希望使用点而不是像素。 4 像素 = 4 x 0.75 = 3 点。 “使用点还可以确保边框在 Outlook 120DPI 中正确调整大小。” (https://github.com/hteumeuleu/email-bugs/issues/86)

另外，stroke="f" 会关闭笔画（应该用 d 来笔画）。所以改为stroked="true"。（HT：https://www.goodemailcode.com/email-enhancements/svg-to-vml，包括更多规格细节）

【讨论】：