Bagaimana untuk Mencapai Sudut Bulat dalam E-mel Outlook Tanpa Imej?-tutorial css-php.cn

Bagaimana untuk Mencapai Sudut Bulat dalam E-mel Outlook Tanpa Imej?

Linda Hamilton

Lepaskan： 2024-10-29 13:03:29

asal

706 orang telah melayarinya

How to Achieve Rounded Corners in Outlook Emails Without Images?

Mencapai Sudut Bulat dalam Outlook tanpa Imej

Jejari sempadan sifat CSS disokong secara meluas, membolehkan penciptaan sudut bulat dalam penyemak imbas . Walau bagaimanapun, ia gagal apabila ia berkaitan dengan Outlook. Isu ini telah mendorong pembangun mencari kaedah alternatif untuk mencipta sudut bulat tanpa menggunakan imej.

Satu penyelesaian terletak pada gabungan ulasan bersyarat Outlook dan VML (Vector Markup Language). Kod berikut boleh disepadukan ke dalam HTML anda untuk mencapai kesan yang diingini:

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

Salin selepas log masuk

Perhatikan bahawa penyelesaian ini telah diuji dalam Outlook 2010 dan pelayar utama sahaja. Ia tidak menyokong OWA, Outlook.com atau penyemak imbas mudah alih.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Sudut Bulat dalam E-mel Outlook Tanpa Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!