OL Office 365 (Win 10) проблема с кругом электронной почты и границей

#html-email

Вопрос:

 <!--[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]-->
 

введите описание изображения здесь
дизайн
сейчас выглядит примерно так
введите описание изображения здесь

как добавить штрихи, как в дизайне

Ответ №1:

Вместо strokesize="4px" использования strokeweight="4px" .

Однако, как правило, вы хотите использовать точки, а не пиксели для языка рвоты (VML). 4px = 4 x 0,75 = 3pt. «Использование точек также гарантирует, что размер границы будет правильно изменен в Outlook 120 точек на дюйм». (https://github.com/hteumeuleu/email-bugs/issues/86)

Кроме того, stroke="f" отключает поглаживание (и его следует поглаживать буквой d). Так что меняйся на stroked="true" . (HT: https://www.goodemailcode.com/email-enhancements/svg-to-vml, и включает в себя дополнительные технические характеристики)