在电子邮件中使用 CSS 圆圈答案

【问题标题】：Using CSS circles in Email在电子邮件中使用 CSS 圆圈
【发布时间】：2015-12-17 22:18:16
【问题描述】：

我正在尝试创建一个中间有一个数字的漂亮圆形，它在我的浏览器中运行良好，但是当我在 MailChimp 中发送时，圆圈变成了巨大的正方形。

这是我的 CSS

.circle{
    width:100px;
    height:100px;
    border-radius:50px;
    font-size:20px;
    color:#ffffff;
    line-height:100px;
    text-align:center;
    background:#ff8080

    }

那我用-

<div class="circle">1</div>

这是在我的浏览器中 - Circle in Browser 这是在 Outlook 中 - Cirlces in Outlook

【问题讨论】：

Rounded corners in outlook without images的可能重复
很多邮件客户端不支持css3，如果要邮件中的圈子，就得用图片了。
我认为这是因为使用 Outlook，您必须使用 Table 而不是 Div。我不知道为什么，但是 Outlook 上的 div 有很多问题。

标签： html css email mailchimp inline-code

【解决方案1】：

很多电子邮件客户端不支持 CSS3，因此您将无法使用边框半径。

如果您希望在电子邮件中包含圈子，则必须使用图片。

【讨论】：

【解决方案2】：

我找到了一个完美的修复方法 -

<div align="center"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:100px;v-text-anchor:middle;width:100px;" arcsize="600%" stroke="f" fillcolor="#ff8080">
<w:anchorlock/>
<center>
<![endif]-->
  <a href="http://"
  style="background-color:#ff8080;border-radius:600px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:100px;text-align:center;text-decoration:none;width:100px;-webkit-text-size-adjust:none;">1</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>

【讨论】：