Outlook メールで丸い角を作成する方法: CSS と VML ソリューション?

Outlook の角丸: CSS および VML ソリューション

視覚的に魅力的なメールを作成することは、特に次のような要素のデザインとなると難しい場合があります。ボタン。 CSS を使用すると、多くの電子メール クライアントで角を丸くすることができますが、Outlook では期待どおりに機能しない可能性があります。

問題:

角を丸くするための標準 CSS コード-moz-border-radius や border-radius などは、Outlook で適切にレンダリングされません。

解決策:

Outlook で角丸を作成する効果的な方法の 1 つ画像を使用すると、Outlook の条件付きコメントと VML (Vector Markup Language) が結合されます。 VML は、Web ページで図形を描画するために使用される古いテクノロジですが、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 中国語 Web サイトの他の関連記事を参照してください。