Outlook 이메일에 둥근 모서리를 만드는 방법: CSS 및 VML 솔루션?

Outlook의 둥근 모서리: CSS 및 VML 솔루션

시각적으로 매력적인 이메일을 만드는 것은 어려울 수 있으며, 특히 다음과 같은 요소를 디자인할 때 더욱 그렇습니다. 버튼. CSS를 사용하면 많은 이메일 클라이언트에서 둥근 모서리를 얻을 수 있지만 Outlook에서는 예상대로 작동하지 않을 수 있습니다.

문제:

둥근 모서리를 만들기 위한 표준 CSS 코드, -moz-border-radius 및 border-radius 등은 Outlook에서 제대로 렌더링되지 않습니다.

해결책:

Outlook에서 둥근 모서리를 만드는 효과적인 방법 중 하나 이미지를 사용하는 것은 Outlook 조건부 주석을 VML(Vector Markup Language)과 결합하는 것입니다. VML은 웹 페이지에서 도형을 그리는 데 사용되는 오래된 기술이지만 Outlook에서는 여전히 지원됩니다.

코드:

다음은 Outlook 2010의 둥근 모서리:

<code class="html"><div>
    <!-- Outlook conditional comments for VML -->
    <!--[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="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroke="f" fillcolor="#d62828">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
            Button Text Here!
        </center>
    </v:roundrect>
    <![endif]-->
    <!-- Non-Outlook fallback -->
    <!--[if !mso]><!-->
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
                <a href="http://www.EXAMPLE.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">
                    Button Text Here!
                </a>
            </td>
        </tr>
    </table>
    <!--<![endif]-->
</div></code>

Outlook 2010에서 VML 코드는 둥근 모서리를 만드는 반면, Outlook이 아닌 브라우저는 CSS를 사용하여 둥근 모서리가 있는 대체 테이블 기반 디자인을 표시합니다.

참고: 이 솔루션은 Outlook 2010 및 주요 브라우저에서만 테스트되었으며 OWA(Outlook Web App), Outlook.com 또는 모바일 브라우저에서는 작동하지 않을 수 있습니다.

위 내용은 Outlook 이메일에 둥근 모서리를 만드는 방법: CSS 및 VML 솔루션?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!