如何在 Outlook 電子郵件中建立圓角：CSS 和 VML 解決方案？

Outlook 中的圓角：CSS 和VML 解決方案

創建具有視覺吸引力的電子郵件可能具有挑戰性，尤其是在設計諸如按鈕。雖然 CSS 允許您在許多電子郵件用戶端中實現圓角，但它在 Outlook 中可能無法按預期工作。

問題：

用於建立圓角的標準 CSS 程式碼，例如 -moz-border-radius 和 border-radius，在 Outlook 中無法正確呈現。

解決方案：

一種在Outlook 中創建圓角的有效方法，無需使用使用圖像是將Outlook 條件註釋與VML（向量標記語言）結合起來。 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 和主要瀏覽器中進行了測試，可能不適用於 Outlook Web App (OWA)、Outlook.com 或行動瀏覽器。

以上是如何在 Outlook 電子郵件中建立圓角：CSS 和 VML 解決方案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！