Я могу создавать закругленные углы у многих клиентов
style="-moz-border-radius: 15px; border-radius: 15px;"
Однако этот CSS не создает округленные углы в Outlook. Есть ли простой способ создания закругленных углов без изображений в Outlook?
Округлые углы в перспективе без изображений
Ответ 1
http://www.campaignmonitor.com/css/ отображает все css, поддерживаемые основными почтовыми клиентами. округленные границы даже не попали в список. На странице есть ссылка на полный PDF файл, в котором отмечается, что радиус границы поддерживается ТОЛЬКО в Thunderbird 2
обратите внимание, что вы должны внедрять стили в элементы html для поддержки широкого спектра почтовых клиентов
Ответ 2
Этот код создает кнопки с закругленными углами в Outlook 2010 с использованием условных комментариев Outlook() и VML:
<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>
Протестировано в Outlook 2010 и только для основных браузеров, а не для OWA, Outlook.com или любых мобильных браузеров. Это стоит поближе. Кредит, при котором - http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/
Ответ 3
Я предлагаю просто не использовать закругленные углы.. после длительных испытаний, как с Litmus, так и с несколькими клиентами - закругленные углы, используя предложенные способы:
<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="mso-wrap-style:none; mso-position-horizontal: center" arcsize="10%" strokecolor="#0368d4" strokeweight="1px" fillcolor="#d62828">
<v:textbox style="mso-fit-shape-to-text:true">
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Button Text Here!</center>
</v:textbox>
</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="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
<span style="color: #ffffff;">
Button Text Here!
</span>
</a>
</td>
</tr> </table>
<![endif]>
</div>
Если вы переадресовываете GMAIL при отправке этого типа кода в GMAIL, он попытается воссоздать его, потому что он больше не будет содержать условия и будет генерировать следующий код в качестве примера:
<div style="margin-top:36.0pt">
<p class="MsoNormal" align="center" dir="RTL" style="text-align:center;direction:rtl;unicode-bidi:embed">
<span dir="LTR" style="font-size:11.5pt;font-family:"Arial",sans-serif;color:#2d3b4a">
<u></u>
<span>
<map name="m_3406853463519709989_MicrosoftOfficeMap0">
<area shape="Polygon" coords="38, 2, 13, 12, 3, 37, 13, 62, 38, 72, 228, 72, 253, 62, 263, 37, 253, 12, 228, 2, 38, 2" href="https://local.greeninvoice.co.il/app/account/verify?key=001dEbYWSscdPxI8xt6BcS%2B%2BrA%3D%3D" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&q=https://local.greeninvoice.co.il/app/account/verify?key%3D001dEbYWSscdPxI8xt6BcS%252B%252BrA%253D%253D&source=gmail&ust=1520336994067000&usg=AFQjCNE1iYP97qNrlsCccYFgDyRW3iVPRw">
</map>
<img border="0" width="264" height="74" src="?ui=2&ik=4e1d22bf20&view=fimg&th=161f5fb79e36447b&attid=0.1&disp=emb&attbid=ANGjdJ_3ejUStIrGp0uslTPSXPSph1LGDDnyTH2gHxWhcMpCHN_CjO4ZYsqbvqZJ9gXCxQ7e3KHV2CAn0f-FWPYH7w7lTM9ym54909Upm-h_G9W--o_I431bc9U3icg&sz=w528-h148&ats=1520250594056&rm=161f5fb79e36447b&zw&atsh=1" usemap="#m_3406853463519709989_MicrosoftOfficeMap0" alt="Rounded Rectangle: הפעלת החשבון " class="CToWUd">
</span>
<u></u>
</span>
<span lang="HE" style="font-size:11.5pt;font-family:"Arial",sans-serif;color:#2d3b4a"><u></u><u></u></span>
</p>
</div>
Это, как вы можете видеть, приведет к поломке ширины, высоты, текста, центра вещей и произойдет потому, что VML является запатентованным языком Microsoft и Outlook преобразует его в карту при пересылке
Ответ 4
В дополнение к ответу @VanAlberts, который показывает, что Эли Дикинсон отличная работа. Вот ссылка на Eli git repo https://gist.github.com/elidickinson/9424116
Я думал, что поделился бы моим улучшением с кодом Eli, который позволяет использовать кнопку динамической ширины на основе текста внутри.
Я нашел этот https://litmus.com/community/discussions/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottom, который показывает, как использовать mso-fit-shape-to-text:true
И это https://litmus.com/community/discussions/1269-flexible-multi-line-bulletproof-buttons, которое показывает, как избежать нежелательного заполнения.
Это мой конечный результат
<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="mso-wrap-style:none; mso-position-horizontal: center" arcsize="10%" strokecolor="#0368d4" strokeweight="1px" fillcolor="#d62828">
<v:textbox style="mso-fit-shape-to-text:true">
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Button Text Here!</center>
</v:textbox>
</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="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
<span style="color: #ffffff;">
Button Text Here!
</span>
</a>
</td>
</tr> </table>
<![endif]>
</div>
Кажется, отлично работает в Outlook 2016, который использует слово для визуализации HTML
Ответ 5
Как вы вставляете свой html в Outlook? Вы позволяете Outlook использовать Word в качестве редактора электронной почты?
Я бы предложил это обходное решение VML, за исключением того, что Outlook может преобразовать его в Word MSO HTML:
http://snook.ca/archives/html_and_css/rounded_corners_experiment_ie/
Вы также можете попробовать "Nifty Corners", который использует комбинацию CSS и JS, но он много работает и, возможно, все еще не попадает прямо в электронное письмо:
http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/ (мне нравится, что он позволяет вам выбирать, какие углы округляются)