So erstellen Sie abgerundete Ecken in Outlook-E-Mails: Eine CSS- und VML-Lösung?

Abgerundete Ecken in Outlook: Eine CSS- und VML-Lösung

Das Erstellen optisch ansprechender E-Mails kann eine Herausforderung sein, insbesondere wenn es um die Gestaltung von Elementen wie geht Tasten. Während Sie mit CSS in vielen E-Mail-Clients abgerundete Ecken erreichen können, funktioniert es in Outlook möglicherweise nicht wie erwartet.

Problem:

Standard-CSS-Code zum Erstellen abgerundeter Ecken, B. -moz-border-radius und border-radius, werden in Outlook nicht ordnungsgemäß gerendert.

Lösung:

Eine effektive Möglichkeit, abgerundete Ecken in Outlook ohne zu erstellen Die Verwendung von Bildern besteht darin, bedingte Outlook-Kommentare mit VML (Vector Markup Language) zu kombinieren. VML ist eine ältere Technologie, die zum Zeichnen von Formen in Webseiten verwendet wird, aber in Outlook immer noch unterstützt wird.

Code:

Hier ist ein Beispielcode, der eine Schaltfläche mit erstellt Abgerundete Ecken in Outlook 2010:

<code class="html"><div>
    <!-- Outlook conditional comments for VML -->
    <!--[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]-->
    <!-- Non-Outlook fallback -->
    <!--[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>

In Outlook 2010 erstellt der VML-Code die abgerundeten Ecken, während Nicht-Outlook-Browser das auf einer Fallbacktabelle basierende Design mit abgerundeten Ecken mithilfe von CSS anzeigen.

Hinweis: Diese Lösung wurde nur in Outlook 2010 und den wichtigsten Browsern getestet und funktioniert möglicherweise nicht in Outlook Web App (OWA), Outlook.com oder mobilen Browsern.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie abgerundete Ecken in Outlook-E-Mails: Eine CSS- und VML-Lösung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!