Win10端Office 365 Outlook邮件圆形元素描边适配问题咨询

你遇到的问题是适配Outlook的VML圆形元素代码配置错误导致描边未生效，具体修改方案如下：

修改说明 #

• 原VML代码中stroke="f"属性直接关闭了描边渲染，导致设置的描边颜色、宽度都未生效，需修改为stroke="t"开启描边
• VML规范中描边宽度的正确属性名为strokeweight，原代码中错误使用了strokesize，需要修正
• VML描边默认向外延伸，因此需要把原143px的宽高增加8px（两侧各4px描边）调整为151px，保证最终渲染尺寸和非Outlook端的效果一致

调整后完整代码 #

<!--[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: 151px;width: 151px;" arcsize="50%" strokecolor="#fbe2a6" strokeweight="4px" stroke="t" 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]-->

内容的提问来源于stack exchange，提问作者Suraj Pradhan