Maison > interface Web > tutoriel CSS > Comment créer des coins arrondis dans les e-mails Outlook sans utiliser d'images ?

Comment créer des coins arrondis dans les e-mails Outlook sans utiliser d'images ?

Barbara Streisand
Libérer: 2024-10-29 18:33:03
original
812 Les gens l'ont consulté

How to Create Rounded Corners in Outlook Emails Without Using Images?

Création de coins arrondis dans Outlook sans images

Vous pouvez implémenter des coins arrondis dans de nombreux clients de messagerie à l'aide de la propriété CSS border-radius. Toutefois, Outlook ne prend pas en charge cette propriété de manière native. Bien qu’il existe des méthodes alternatives impliquant des images, elles peuvent être restrictives. Existe-t-il une technique pour obtenir des coins arrondis sans utiliser d'images dans Outlook ?

Outlook 2010 propose une solution utilisant des commentaires conditionnels et du VML (Vector Markup Language). Ce code peut produire des boutons aux coins arrondis :

<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>
Copier après la connexion

Cette méthode est prise en charge dans Outlook 2010 et les principaux navigateurs. Cela ne fonctionne pas dans OWA, Outlook.com ou les navigateurs mobiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal