VML邮件模板开发：如何仅实现左侧边框圆角？

你遇到的问题是因为部分邮件客户端（尤其是旧版Outlook）不支持VML arcsize 属性的多值写法，即便你写了arcsize="45%,0,0,45%"，也会默认把所有角应用第一个值的圆角效果。下面给你两个可行的解决办法：

方案1：修正arcsize写法（适配支持多值的客户端） #

VML的arcsize属性四个值依次对应左上、右上、右下、左下四个角的圆弧比例。要实现仅左侧圆角，需把右上、右下设为0，左上、左下设为你需要的比例。修改后的代码如下：

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="你的跳转链接" style="height:225px;v-text-anchor:middle;width:600px;" arcsize="45%,0,0,45%" strokecolor="#fffefe" fill="t">
  <v:fill type="frame" src="你的图片URL" color="#F8F7F1" />
  <w:anchorlock/>
  <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">.</center>
</v:roundrect>

方案2：元素叠加法（兼容所有邮件客户端） #

如果多值写法不生效，用两个VML元素叠加组合：左侧放一个带圆角的窄块，右侧放一个普通矩形，两者宽度总和等于原容器宽度。代码示例：

<!-- 左侧圆角块 -->
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:225px;v-text-anchor:middle;width:50px;position:absolute;left:0;" arcsize="45%,0,0,45%" strokecolor="#fffefe" fill="t">
  <v:fill type="frame" src="你的图片URL" color="#F8F7F1" />
  <w:anchorlock/>
</v:roundrect>
<!-- 右侧矩形块 -->
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="你的跳转链接" style="height:225px;v-text-anchor:middle;width:550px;position:absolute;left:50px;" strokecolor="#fffefe" fill="t">
  <v:fill type="frame" src="你的图片URL" color="#F8F7F1" />
  <w:anchorlock/>
  <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">.</center>
</v:rect>

注意调整两个元素的宽度（比如示例中50px+550px=600px），确保图片填充路径一致，避免视觉错位。

内容的提问来源于stack exchange，提问作者mario ruiz