Cara Membuat Sudut Bulat dalam E-mel Outlook: Penyelesaian CSS dan VML?

Sudut Bulat dalam Outlook: Penyelesaian CSS dan VML

Membuat e-mel yang menarik secara visual boleh menjadi mencabar, terutamanya apabila ia berkaitan dengan reka bentuk elemen seperti butang. Walaupun CSS membolehkan anda mencapai sudut bulat dalam banyak klien e-mel, ia mungkin tidak berfungsi seperti yang diharapkan dalam Outlook.

Masalah:

Kod CSS standard untuk mencipta sudut bulat, seperti -moz-border-radius dan border-radius, tidak dipaparkan dengan betul dalam Outlook.

Penyelesaian:

Satu cara berkesan untuk mencipta sudut bulat dalam Outlook tanpa menggunakan imej adalah untuk menggabungkan ulasan bersyarat Outlook dengan VML (Vector Markup Language). VML ialah teknologi lama yang digunakan untuk melukis bentuk dalam halaman web, tetapi ia masih disokong dalam Outlook.

Kod:

Berikut ialah contoh kod yang mencipta butang dengan sudut bulat dalam 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>

Dalam Outlook 2010, kod VML akan mencipta sudut bulat, manakala penyemak imbas bukan Outlook akan memaparkan reka bentuk berasaskan jadual sandaran dengan sudut bulat menggunakan CSS.

Nota: Penyelesaian ini telah diuji dalam Outlook 2010 dan penyemak imbas utama sahaja, dan mungkin tidak berfungsi dalam Outlook Web App (OWA), Outlook.com atau penyemak imbas mudah alih.

Atas ialah kandungan terperinci Cara Membuat Sudut Bulat dalam E-mel Outlook: Penyelesaian CSS dan VML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!