Comment obtenir des coins arrondis dans les e-mails Outlook sans images ?-tutoriel CSS-php.cn

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

Linda Hamilton

Libérer： 2024-10-29 13:03:29

original

644 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!