首頁 > web前端 > css教學 > 如何在沒有圖像的 Outlook 電子郵件中實現圓角?

如何在沒有圖像的 Outlook 電子郵件中實現圓角?

Linda Hamilton
發布: 2024-10-29 13:03:29
原創
664 人瀏覽過

How to Achieve Rounded Corners in Outlook Emails Without Images?

在沒有圖像的Outlook 中實現圓角

CSS 屬性border-radius 得到廣泛支持,允許在瀏覽器中創建圓角。然而,當涉及到 Outlook 時,它就顯得不足了。這個問題促使開發人員尋求替代方法來在不使用圖像的情況下創建圓角。

一個解決方案在於 Outlook 條件註解和 VML(向量標記語言)的結合。可以將以下程式碼整合到您的 HTML 中以達到所需的效果:

<code class="html"><div>
    <!--[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]-->
    <!--[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 和主要瀏覽器中進行了測試。它不支援 OWA、Outlook.com 或行動瀏覽器。

以上是如何在沒有圖像的 Outlook 電子郵件中實現圓角?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板