画像のない Outlook メールの角を丸くするにはどうすればよいですか?-CSSチュートリアル-php.cn

画像のない Outlook メールの角を丸くするにはどうすればよいですか?

Linda Hamilton

リリース： 2024-10-29 13:03:29

オリジナル

644 人が閲覧しました

How to Achieve Rounded Corners in Outlook Emails Without Images?

Outlook で画像を使用せずに角を丸くする

CSS プロパティの border-radius が広くサポートされており、ブラウザで角を丸く作成できます。。ただし、Outlook に関しては不十分です。この問題により、開発者は画像を使用せずに丸い角を作成する代替方法を模索するようになりました。

解決策の 1 つは、Outlook の条件付きコメントと VML (Vector Markup Language) を組み合わせることです。次のコードを 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 中国語 Web サイトの他の関連記事を参照してください。