Maison > interface Web > tutoriel CSS > le corps du texte

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

Mary-Kate Olsen
Libérer: 2024-10-31 09:56:02
original
248 Les gens l'ont consulté

How to Create Rounded Corners in Outlook Emails Without Images?

Styler les coins arrondis dans Outlook sans images

Créer des coins arrondis dans les clients de messagerie peut être simple en utilisant CSS. Cependant, la méthode traditionnelle d'utilisation de la propriété CSS border-radius ne fonctionne pas dans Microsoft Outlook. Cette limitation présente un défi lors de la conception d'e-mails avec des éléments aux coins arrondis.

N'ayez crainte, il existe une solution qui vous permet d'obtenir des coins arrondis dans Outlook sans recourir à l'utilisation d'images. La clé réside dans l'utilisation des commentaires conditionnels d'Outlook et du VML (Vector Markup Language).

<!--[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]> -->
<!--<![endif]-->
Copier après la connexion

Ce code produit des boutons aux coins arrondis dans Outlook 2010. Il utilise les commentaires conditionnels d'Outlook pour cibler spécifiquement Outlook et appliquer le code VML. . Le code VML lui-même définit la forme rectangulaire arrondie et ses attributs, tels que la couleur et le texte.

Notez que cette solution a été testée dans Outlook 2010 et les principaux navigateurs mais pas dans OWA, Outlook.com ou les navigateurs mobiles. . Il est toujours conseillé de tester votre code sur différentes plateformes pour garantir la compatibilité.

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