Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erstelle ich abgerundete Ecken in Outlook-E-Mails ohne Bilder?

Mary-Kate Olsen
Freigeben: 2024-10-31 09:56:02
Original
146 Leute haben es durchsucht

How to Create Rounded Corners in Outlook Emails Without Images?

Abgerundete Ecken in Outlook ohne Bilder gestalten

Das Erstellen abgerundeter Ecken in E-Mail-Clients kann mithilfe von CSS ganz einfach sein. Allerdings funktioniert die herkömmliche Methode zur Verwendung der CSS-Eigenschaft „border-radius“ in Microsoft Outlook nicht. Diese Einschränkung stellt beim Entwerfen von E-Mails mit Elementen mit abgerundeten Ecken eine Herausforderung dar.

Keine Angst, es gibt eine Lösung, mit der Sie in Outlook abgerundete Ecken erzielen können, ohne auf die Verwendung von Bildern zurückgreifen zu müssen. Der Schlüssel liegt in der Nutzung der bedingten Kommentare von Outlook und 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]-->
Nach dem Login kopieren

Dieser Code erzeugt Schaltflächen mit abgerundeten Ecken in Outlook 2010. Er nutzt die bedingten Kommentare von Outlook, um gezielt auf Outlook abzuzielen und den VML-Code anzuwenden . Der VML-Code selbst definiert die abgerundete rechteckige Form und ihre Attribute wie Farbe und Text.

Beachten Sie, dass diese Lösung in Outlook 2010 und den wichtigsten Browsern getestet wurde, jedoch nicht in OWA, Outlook.com oder mobilen Browsern . Es ist immer ratsam, Ihren Code auf verschiedenen Plattformen zu testen, um die Kompatibilität sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich abgerundete Ecken in Outlook-E-Mails ohne Bilder?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!