Outlook 桌面版（Windows）基于老旧的 Word 渲染引擎，不支持 border-radius 等现代 CSS；需通过 VML（Vector Markup Language）实现兼容性圆角按钮，本文详解原理、代码实现与可访问性注意事项。
outlook 桌面版（windows）基于老旧的 word 渲染引擎，不支持 `border-radius` 等现代 css；需通过 vml（vector markup language）实现兼容性圆角按钮，本文详解原理、代码实现与可访问性注意事项。
Outlook 桌面版（2007 及后续版本）使用 Microsoft Word 作为 HTML 渲染引擎，该引擎自 2007 年起未实质性更新，因此完全不支持 border-radius、box-shadow、Flexbox、CSS Grid 等几乎所有现代 CSS 特性。你所写的内联样式 border-radius:5px 和条件注释中的 !important 声明，在 Outlook 中均被忽略——这不是代码书写错误，而是底层渲染限制。
✅ 正确解法：使用 VML（Vector Markup Language）
VML 是微软专为 Office 应用设计的 XML-based 矢量图形格式，Outlook 原生支持（尽管已过时）。它允许我们“绘制”一个带圆角的矩形容器，并将链接嵌入其中，从而模拟圆角按钮视觉效果。
以下是一个经过验证、广泛使用的 Outlook 兼容圆角按钮结构（含 Outlook 条件注释 + VML + 回退方案）：
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
href="#" style="height:40px;v-text-anchor:middle;width:180px;"
arcsize="50%" strokecolor="#df0024" fill="t">
<w:anchorlock/>
<center style="color:#df0024;font-family:Arial,sans-serif;font-size:18px;font-weight:bold;">
GET STARTED
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="#" style="display:inline-block;padding:10px 25px;background-color:#FFFFFF;border:1px solid #df0024;border-radius:5px;color:#df0024;text-decoration:none;font-family:Arial,sans-serif;font-size:18px;font-weight:bold;">
GET STARTED
</a>
<!--<![endif]-->? 关键说明：
- arcsize="50%" 控制圆角程度（0% = 直角，50% ≈ 完全圆角，适用于正方形按钮）；
- <w:anchorlock/> 确保文字垂直居中；
- 外层 <!--[if mso]>...<![endif]--> 仅在 Outlook（Word 引擎）中解析 VML；
- <!--[if !mso]><!-->...<!--<![endif]--> 为其他邮箱客户端提供标准 HTML/CSS 回退；
- VML 中 fill="t" 表示启用填充，strokecolor 设置边框色，href 必须写在 <v:roundrect> 标签上（而非内部 <a>）。
⚠️ 重要注意事项：
- 可访问性风险：VML 区域无法被键盘 Tab 导航聚焦，屏幕阅读器可能无法识别其为可点击链接。建议在 <v:roundrect> 内添加 role="link" 和 aria-label（如 aria-label="Get started now"），并确保纯文本邮件版本（plain-text fallback）包含相同链接地址；
- 移动端 Outlook 不受影响：iOS/Android 版 Outlook 使用 WebKit 渲染，完全支持 border-radius，无需 VML；
- 测试必做：务必使用 Email on Acid 或 Litmus 进行跨客户端预览，尤其验证 Outlook 2013/2016/2019/365 的显示效果。
? 替代建议（轻量级场景）：
若设计允许，可用「背景图+透明 PNG 圆角按钮」替代 VML（需注意图片加载失败时的降级文案），或采用「微圆角+强对比边框」视觉弱化直角感（如 border: 2px solid #df0024 + padding: 9px 24px），兼顾简洁性与兼容性。
总之，border-radius 在 Outlook 桌面版失效是技术事实，而非 bug；拥抱 VML 是当前最稳定可靠的解决方案，但务必同步关注可访问性与渐进增强策略。
