outlook 桌面版（2007–2019）因使用 ms word 渲染引擎，不支持 border-radius 等 css 属性，需用 vml 配合条件注释和命名空间声明实现圆角按钮，并必须双写结构兼顾其他邮件客户端。
Outlook 为什么连圆角按钮都渲染不出来
因为 Outlook 桌面版（2007–2019）用的是 MS Word 渲染引擎，它根本不认 border-radius、background-image，甚至会把整条带 border-radius 的 style 声明直接忽略。你写的 style="background:#007bff; border-radius:4px; padding:12px 24px;"，在 Outlook 里只剩下一个没背景、没圆角、文字挤在左上角的裸文本。
VML 按钮必须配合条件注释和命名空间声明
不是加个 <roundrect></roundrect> 就能生效——它得在 Outlook 认得的上下文里运行。缺一不可：
-
必须写在根标签上，否则 VML 元素被当无效标签丢弃 -
<!--[if mso]>...<![endif]-->条件注释必须包裹 VML 结构，其他客户端才不解析也不报错 -
<roundrect></roundrect>的arcsize控制圆角（如arcsize="15%"），fillcolor设背景色，strokecolor控边框 - VML 内部要用
<textbox></textbox>包住文字，且设inset="0,0,0,0"，否则文字被裁或偏移
VML 按钮要和标准 HTML 按钮共存，不能只写一套
你不能删掉普通 <table> 按钮，只留 VML——那 Gmail、Apple Mail 就啥也看不到。正确做法是双写结构，用条件注释隔离：
<pre class="brush:php;toolbar:false;"><!--[if mso]>
<v:roundrect arcsize="15%" fillcolor="#007bff" strokecolor="#007bff" style="width:200px;height:44px;">
<v:textbox inset="0,0,0,0">
<center style="color:#ffffff; font-family:Helvetica, Arial, sans-serif; font-size:16px;">立即领取</center>
</v:textbox>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
</pre>
<table cellpadding="0" cellspacing="0" border="0" style="display:inline-block;"><tr>
<td bgcolor="#007bff" style="padding:12px 24px; border-radius:4px;">
<a href="https://example.com" style="color:#ffffff; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:16px;">立即领取</a>
</td>
</tr></table>
<!--<![endif]--><p>注意：<code>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
