Maison > interface Web > tutoriel CSS > Comment obtenir des coins arrondis dans les e-mails Outlook sans images ?

Comment obtenir des coins arrondis dans les e-mails Outlook sans images ?

Linda Hamilton
Libérer: 2024-10-29 13:03:29
original
708 Les gens l'ont consulté

How to Achieve Rounded Corners in Outlook Emails Without Images?

Obtenir des coins arrondis dans Outlook sans images

La propriété CSS border-radius est largement prise en charge, permettant la création de coins arrondis dans les navigateurs . Cependant, il est insuffisant en ce qui concerne Outlook. Ce problème a incité les développeurs à rechercher des méthodes alternatives pour créer des coins arrondis sans utiliser d'images.

Une solution réside dans la combinaison des commentaires conditionnels Outlook et du VML (Vector Markup Language). Le code suivant peut être intégré à votre HTML pour obtenir l'effet souhaité :

<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

Notez que cette solution a été testée dans Outlook 2010 et les principaux navigateurs uniquement. Il ne prend pas en charge 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