如何在电子邮件页面html上编写一个完美的圆圈？答案

【问题标题】：How to code a perfect circle on the email page html?如何在电子邮件页面html上编写一个完美的圆圈？
【发布时间】：2022-01-06 18:55:09
【问题描述】：

                            <div style="font-family: 'Source Sans Pro',sans-serif;text-align:center;background-color:#ffffff">
<div style="height:20px;"></div>

<div style="margin:0 auto; max-width: 350px; border: none;">
    {logo}
</div>

<div style="height:20px;"></div

<div style="padding: 150px 40px;margin:0 auto;background-color:#fde45f;width:600px;max-width:100%;border-radius: 50%;">
    <p style="text-align:middle;font-size: 16px;font-weight: normal;">
        <b>Hello {first_name}</b>,

#目前圆圈并不完美，每个设备的电子邮件中圆圈的形状都会发生变化。我希望文本完全在圆圈内。我不知道为什么电子邮件页面上的圆圈形状一直在变化。

【问题讨论】：

边界半径属性有两个值。看看这个stackoverflow.com/questions/29966499/…

标签： css email geometry padding

【解决方案1】：

<div style="font-family: 'Source Sans Pro',sans-serif;text-align:center;background-color:#ffffff">
        <div style="height:20px;"></div>

        <div style="margin:0 auto; max-width: 350px; border: none;">
            {logo}
        </div>

        <div style="height:20px;"></div>

      <div style="margin: 0 auto; background-color: #fde45f;    width: 600px;    border-radius: 100%;    height: 600px;    display: flex;    align-items: center;    justify-content: center;">
          <p style="text-align:middle;font-size: 16px;font-weight: normal;">
              <b>Hello {first_name}</b></p>
      </div>
</div>

【讨论】：

谢谢！它在窗口中看起来不错，但在移动电子邮件应用程序上看起来像椭圆形。我必须为手机制作单独的代码吗？
是的，您可以为移动设备添加单独的代码。