html 圆角Outlook & Co

vc9ivgsu 于 2023-03-11 发布在其他

关注(0)|答案(2)|浏览(106)

我问自己，是否有一个2022/23解决方案的问题，圆角在Outlook和所有的电子邮件客户端。
The latest solution i found .
可悲的是，它并不是真正支持在每个客户端。我知道，支持每个客户端是相当困难的，但解决方案是真的bug有时。
我想知道是否有新的方法来解决这个问题？
我试过上面的解决方案，但它确实有缺陷。

Html

来源：https://stackoverflow.com/questions/75649713/rounded-corners-outlook-co

2条答案

按热度按时间

kognpnkq1#

border-radius现在在电子邮件客户端上有很好的支持。（参见Can I email）。对于Windows上的Outlook，VML仍然是一条路。但我通常建议让事情优雅地降级（意味着你会得到方角）。

赞(0）回复(0）举报 2023-03-11

db2dz4w82#

有一些VML解决方案可以让你复制<a>链接，这是不安全的。前几天我发现这个可以让你只保留一个<a>，而且有一个生成器。
这在<head>中进行，以帮助Windows Mail深色模式的全色背景按钮：

<!--[if mso]> 
<style> 
.buttonlink {background: transparent !important;} 
</style> 
<![endif]-->

这是按钮本身，在全半径处（对于小拐角或不同大小，请参见生成器https://vml-pather.glitch.me/?shape=button）：

<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="50%" stroke="false" fillcolor="#3D35FF">
<w:anchorlock/>
<center style="">
<![endif]-->
  <a href="https://www.google.com" style="background-color:#3D35FF;border-radius:25px;color:#ffffff;display:inline-block;font-family:arial, sans-serif;font-size: 20px; line-height: 50px;font-weight: bold;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;" class="buttonlink">
    CTA Here
  </a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->

请记住手机上的宽度（经验法则300px的目标），不要使按钮宽度太长。

赞(0）回复(0）举报 2023-03-11

我来回答

html 圆角Outlook & Co

2条答案

相关问题

热门标签

最新问答