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 按钮必须配合条件注释和命名空间声明
不是加个 <v:roundrect> 就能生效——它得在 Outlook 认得的上下文里运行。缺一不可：
-
<html xmlns:v="urn:schemas-microsoft-com:vml">必须写在根标签上，否则 VML 元素被当无效标签丢弃 -
<!--[if mso]>...<![endif]-->条件注释必须包裹 VML 结构，其他客户端才不解析也不报错 -
<v:roundrect>的arcsize控制圆角（如arcsize="15%"），fillcolor设背景色，strokecolor控边框 - VML 内部要用
<v:textbox>包住文字，且设inset="0,0,0,0"，否则文字被裁或偏移
VML 按钮要和标准 HTML 按钮共存，不能只写一套
你不能删掉普通 <table> 按钮，只留 VML——那 Gmail、Apple Mail 就啥也看不到。正确做法是双写结构，用条件注释隔离：
<!--[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]><!-->
<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]-->
注意：<!--[if !mso]> 是反向条件注释，但部分旧版 Outlook 解析不稳定，更稳妥写法是把非 VML 部分放在条件注释外，再用 <!--[if mso]> 覆盖替换。
立即学习“前端免费学习笔记（深入）”；
VML 按钮的宽高、文字对齐和点击热区容易出问题
VML 不吃 CSS 盒模型，所有尺寸靠属性硬控，稍有偏差就文字溢出或点击失效：
-
width和height必须写在<v:roundrect>上，单位是像素，不能用百分比 - 文字必须用
<center>或内联text-align:center，v:textbox默认左对齐 - 不要指望
padding在 VML 里起作用——想留白？改inset值，比如inset="12,12,12,12" - 链接需额外包裹
<a href>在<center>里，否则点击区域仅限文字，不是整个按钮 - 测试时务必打开 Outlook 2016/2019 桌面客户端，OWA（网页版）和移动端压根不支持 VML
真正难的不是画出一个圆角按钮，而是让同一段代码在 Outlook 里有圆角、在 Gmail 里有圆角、在 Apple Mail 里不崩——VML 只解决 Outlook 这一端，其余客户端全靠 fallback 表格+内联样式兜底，漏写任何一层，就等于主动放弃一种设备的用户。
