此代码中的圆圈无法在yahoo邮件和Gmail上正确显示

Question

我不是很擅长这个，我是一名平面设计师，但我尝试学习CSS HTML的基础知识，所以我使用我在这里找到的代码创建了这个圆形，我试图将它插入到时事通讯中，在移动和某些邮箱上看起来都很好，但在PC上的雅虎邮箱和gmail圈形状完全错误！ 有人能帮助我吗？

 <style type="text/css">
     /* Main Container - this controls the size of the circle */ 
     .circle_container {    
         display: block;    
         width : 70px;  
         height : 70px;     
         margin-left: auto; 
         margin-right: auto;    
         padding : 0;   
         /* border : 2px solid red; */ 
     } 
     /* Circle Main draws the actual circle */ 

    .circle_main {  
        width : 100%;   
        height : 100%;  
        border-radius : 50%;    
        border : 2px solid #197DB5;  
        background : #E22227;
        /* can alter thickness and colour of circle on this line */     
        margin : 0;     
        padding : 0; 
    }
    /* Circle Text Container - constrains text area to within the circle */ 
    .circle_text_container {    /* area constraints */  
        width : 70%;    
        height : 70%;   
        max-width : 70%;    
        max-height : 70%;   
        margin : 0;     
        padding : 0;    
        /* some position nudging to center the text area */     
        position : relative;    
        left : 15%;     
        top : 15%;      
        /* preserve 3d prevents blurring sometimes caused by the text centering in the next class */    
        transform-style : preserve-3d;      
        /*border : 1px solid green;*/ 
    }
    /* Circle Text - the appearance of the text within the circle plus vertical centering */ 
    .circle_text {  
        /* change font/size/etc here */     
        font: 11px "merriweather", Arial, Serif;     
        color: white; 
        text-align : center;        
        /* vertical centering technique */  
        position : relative;    
        top : 50%;  
        transform : translateY(-50%); 
    }
</style>
    <div class="circle_container">
    <div class="circle_main">
    <div class="circle_text_container">
    <div class="circle_text">80 EUR<br />
    PERS</div>
    </div>
   </div>
   </div>

这是在yahoo和gmail上显示的方式

这是在手机和圆形立方体上显示的方式